mirror of
https://github.com/wanglin2/mind-map.git
synced 2026-02-21 10:27:44 +08:00
全新文档
This commit is contained in:
wanglin2
parent
fd0a594b56
commit
5e994322fe
@ -1 +1 @@
|
||||
<!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,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.2d06497a.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/css/app.3d234c87.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.94891485.css" rel="preload" as="style"><link href="dist/js/app.54d858bc.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.6cac1a4d.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.94891485.css" rel="stylesheet"><link href="dist/css/app.3d234c87.css" 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 src="dist/js/chunk-vendors.6cac1a4d.js"></script><script src="dist/js/app.54d858bc.js"></script></body></html>
|
||||
<!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,initial-scale=1"><title>一个简单的web思维导图实现</title><link href="dist/js/chunk-2d0a3179.8bac0e6a.js" rel="prefetch"><link href="dist/js/chunk-2d0aa579.3848b480.js" rel="prefetch"><link href="dist/js/chunk-2d0aa978.0c0ab348.js" rel="prefetch"><link href="dist/js/chunk-2d0ab10b.ea3915be.js" rel="prefetch"><link href="dist/js/chunk-2d0abe0f.ba566b9e.js" rel="prefetch"><link href="dist/js/chunk-2d0b91e5.9058553b.js" rel="prefetch"><link href="dist/js/chunk-2d0b92c3.ff912e01.js" rel="prefetch"><link href="dist/js/chunk-2d0bd54e.988f0b69.js" rel="prefetch"><link href="dist/js/chunk-2d0be174.b87008fb.js" rel="prefetch"><link href="dist/js/chunk-2d0c0a44.d53f93f5.js" rel="prefetch"><link href="dist/js/chunk-2d0c18d8.ef38347c.js" rel="prefetch"><link href="dist/js/chunk-2d0c191e.101c6ac5.js" rel="prefetch"><link href="dist/js/chunk-2d0c1a01.dc5d667f.js" rel="prefetch"><link href="dist/js/chunk-2d0d9fbc.658a8494.js" rel="prefetch"><link href="dist/js/chunk-2d0da701.7110cb06.js" rel="prefetch"><link href="dist/js/chunk-2d0dad5f.83962334.js" rel="prefetch"><link href="dist/js/chunk-2d0db0f2.773ee0f5.js" rel="prefetch"><link href="dist/js/chunk-2d0dddce.29899f8c.js" rel="prefetch"><link href="dist/js/chunk-2d0e2326.085fb101.js" rel="prefetch"><link href="dist/js/chunk-2d0e268c.314fd603.js" rel="prefetch"><link href="dist/js/chunk-2d0e5089.cd1baa18.js" rel="prefetch"><link href="dist/js/chunk-2d0e9742.62e1ccbf.js" rel="prefetch"><link href="dist/js/chunk-2d0f026c.bb49839e.js" rel="prefetch"><link href="dist/js/chunk-2d2082b9.ffe557f3.js" rel="prefetch"><link href="dist/js/chunk-2d208ffa.7492f109.js" rel="prefetch"><link href="dist/js/chunk-2d20ec02.917aff76.js" rel="prefetch"><link href="dist/js/chunk-2d20f68f.5b4a5b5f.js" rel="prefetch"><link href="dist/js/chunk-2d210a7a.25884d5e.js" rel="prefetch"><link href="dist/js/chunk-2d216004.3416e02c.js" rel="prefetch"><link href="dist/js/chunk-2d216b67.2d06497a.js" rel="prefetch"><link href="dist/js/chunk-2d217907.96994ac6.js" rel="prefetch"><link href="dist/js/chunk-2d226d0a.d30a47fe.js" rel="prefetch"><link href="dist/js/chunk-2d2299c3.5aa1632c.js" rel="prefetch"><link href="dist/js/chunk-2d2308b0.d813ba33.js" rel="prefetch"><link href="dist/js/chunk-3a2f3e67.13278516.js" rel="prefetch"><link href="dist/css/app.55fd095e.css" rel="preload" as="style"><link href="dist/css/chunk-vendors.1790fe42.css" rel="preload" as="style"><link href="dist/js/app.5a6158b0.js" rel="preload" as="script"><link href="dist/js/chunk-vendors.7f3b8358.js" rel="preload" as="script"><link href="dist/css/chunk-vendors.1790fe42.css" rel="stylesheet"><link href="dist/css/app.55fd095e.css" 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 src="dist/js/chunk-vendors.7f3b8358.js"></script><script src="dist/js/app.5a6158b0.js"></script></body></html>
|
||||
140
web/package-lock.json
generated
140
web/package-lock.json
generated
@ -11,6 +11,7 @@
|
||||
"@toast-ui/editor": "^3.1.5",
|
||||
"core-js": "^3.6.5",
|
||||
"element-ui": "^2.15.1",
|
||||
"highlight.js": "^10.7.3",
|
||||
"v-viewer": "^1.6.4",
|
||||
"vue": "^2.6.11",
|
||||
"vue-i18n": "^8.27.2",
|
||||
@ -27,6 +28,8 @@
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"less": "^3.12.2",
|
||||
"less-loader": "^7.1.0",
|
||||
"markdown-it": "^13.0.1",
|
||||
"markdown-it-checkbox": "^1.1.0",
|
||||
"prettier": "^1.19.1",
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"webpack": "^4.44.2"
|
||||
@ -7846,7 +7849,6 @@
|
||||
"version": "10.7.3",
|
||||
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
|
||||
"integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": "*"
|
||||
}
|
||||
@ -9334,6 +9336,15 @@
|
||||
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/linkify-it": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
|
||||
"integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"uc.micro": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"node_modules/loader-fs-cache": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
|
||||
@ -9554,6 +9565,49 @@
|
||||
"node": ">=0.10.0"
|
||||
}
|
||||
},
|
||||
"node_modules/markdown-it": {
|
||||
"version": "13.0.1",
|
||||
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.1.tgz",
|
||||
"integrity": "sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"argparse": "^2.0.1",
|
||||
"entities": "~3.0.1",
|
||||
"linkify-it": "^4.0.1",
|
||||
"mdurl": "^1.0.1",
|
||||
"uc.micro": "^1.0.5"
|
||||
},
|
||||
"bin": {
|
||||
"markdown-it": "bin/markdown-it.js"
|
||||
}
|
||||
},
|
||||
"node_modules/markdown-it-checkbox": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/markdown-it-checkbox/-/markdown-it-checkbox-1.1.0.tgz",
|
||||
"integrity": "sha512-NkZVjnXo5G+cLNdi7DPZxICypBuxFE9F8sx3YGMZn+Cfizr8EZ/1TFUKl7ZnefF6cr1aFHbnQ5iA3rc4cp7EyA==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"underscore": "^1.8.2"
|
||||
}
|
||||
},
|
||||
"node_modules/markdown-it/node_modules/argparse": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
|
||||
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/markdown-it/node_modules/entities": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
|
||||
"integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
|
||||
"dev": true,
|
||||
"engines": {
|
||||
"node": ">=0.12"
|
||||
},
|
||||
"funding": {
|
||||
"url": "https://github.com/fb55/entities?sponsor=1"
|
||||
}
|
||||
},
|
||||
"node_modules/md5.js": {
|
||||
"version": "1.3.5",
|
||||
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
|
||||
@ -9571,6 +9625,12 @@
|
||||
"integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/mdurl": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
|
||||
"integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/media-typer": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||
@ -14266,6 +14326,12 @@
|
||||
"integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/uc.micro": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
|
||||
"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/uglify-js": {
|
||||
"version": "3.4.10",
|
||||
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
|
||||
@ -14303,6 +14369,12 @@
|
||||
"url": "https://github.com/sponsors/ljharb"
|
||||
}
|
||||
},
|
||||
"node_modules/underscore": {
|
||||
"version": "1.13.6",
|
||||
"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
|
||||
"integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/unicode-canonical-property-names-ecmascript": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
|
||||
@ -22289,8 +22361,7 @@
|
||||
"highlight.js": {
|
||||
"version": "10.7.3",
|
||||
"resolved": "https://registry.npmjs.org/highlight.js/-/highlight.js-10.7.3.tgz",
|
||||
"integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A==",
|
||||
"dev": true
|
||||
"integrity": "sha512-tzcUFauisWKNHaRkN4Wjl/ZA07gENAjFl3J/c480dprkGTg5EQstgaNFqBfUqCq54kZRIEcreTsAgF/m2quD7A=="
|
||||
},
|
||||
"hmac-drbg": {
|
||||
"version": "1.0.1",
|
||||
@ -23414,6 +23485,15 @@
|
||||
"integrity": "sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==",
|
||||
"dev": true
|
||||
},
|
||||
"linkify-it": {
|
||||
"version": "4.0.1",
|
||||
"resolved": "https://registry.npmjs.org/linkify-it/-/linkify-it-4.0.1.tgz",
|
||||
"integrity": "sha512-C7bfi1UZmoj8+PQx22XyeXCuBlokoyWQL5pWSP+EI6nzRylyThouddufc2c1NDIcP9k5agmN9fLpA7VNJfIiqw==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"uc.micro": "^1.0.1"
|
||||
}
|
||||
},
|
||||
"loader-fs-cache": {
|
||||
"version": "1.0.3",
|
||||
"resolved": "https://registry.npmjs.org/loader-fs-cache/-/loader-fs-cache-1.0.3.tgz",
|
||||
@ -23593,6 +23673,42 @@
|
||||
"object-visit": "^1.0.0"
|
||||
}
|
||||
},
|
||||
"markdown-it": {
|
||||
"version": "13.0.1",
|
||||
"resolved": "https://registry.npmjs.org/markdown-it/-/markdown-it-13.0.1.tgz",
|
||||
"integrity": "sha512-lTlxriVoy2criHP0JKRhO2VDG9c2ypWCsT237eDiLqi09rmbKoUetyGHq2uOIRoRS//kfoJckS0eUzzkDR+k2Q==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"argparse": "^2.0.1",
|
||||
"entities": "~3.0.1",
|
||||
"linkify-it": "^4.0.1",
|
||||
"mdurl": "^1.0.1",
|
||||
"uc.micro": "^1.0.5"
|
||||
},
|
||||
"dependencies": {
|
||||
"argparse": {
|
||||
"version": "2.0.1",
|
||||
"resolved": "https://registry.npmjs.org/argparse/-/argparse-2.0.1.tgz",
|
||||
"integrity": "sha512-8+9WqebbFzpX9OR+Wa6O29asIogeRMzcGtAINdpMHHyAg10f05aSFVBbcEqGf/PXw1EjAZ+q2/bEBg3DvurK3Q==",
|
||||
"dev": true
|
||||
},
|
||||
"entities": {
|
||||
"version": "3.0.1",
|
||||
"resolved": "https://registry.npmjs.org/entities/-/entities-3.0.1.tgz",
|
||||
"integrity": "sha512-WiyBqoomrwMdFG1e0kqvASYfnlb0lp8M5o5Fw2OFq1hNZxxcNk8Ik0Xm7LxzBhuidnZB/UtBqVCgUz3kBOP51Q==",
|
||||
"dev": true
|
||||
}
|
||||
}
|
||||
},
|
||||
"markdown-it-checkbox": {
|
||||
"version": "1.1.0",
|
||||
"resolved": "https://registry.npmjs.org/markdown-it-checkbox/-/markdown-it-checkbox-1.1.0.tgz",
|
||||
"integrity": "sha512-NkZVjnXo5G+cLNdi7DPZxICypBuxFE9F8sx3YGMZn+Cfizr8EZ/1TFUKl7ZnefF6cr1aFHbnQ5iA3rc4cp7EyA==",
|
||||
"dev": true,
|
||||
"requires": {
|
||||
"underscore": "^1.8.2"
|
||||
}
|
||||
},
|
||||
"md5.js": {
|
||||
"version": "1.3.5",
|
||||
"resolved": "https://registry.npmjs.org/md5.js/-/md5.js-1.3.5.tgz",
|
||||
@ -23610,6 +23726,12 @@
|
||||
"integrity": "sha512-iV3XNKw06j5Q7mi6h+9vbx23Tv7JkjEVgKHW4pimwyDGWm0OIQntJJ+u1C6mg6mK1EaTv42XQ7w76yuzH7M2cA==",
|
||||
"dev": true
|
||||
},
|
||||
"mdurl": {
|
||||
"version": "1.0.1",
|
||||
"resolved": "https://registry.npmjs.org/mdurl/-/mdurl-1.0.1.tgz",
|
||||
"integrity": "sha512-/sKlQJCBYVY9Ers9hqzKou4H6V5UWc/M59TH2dvkt+84itfnq7uFOMLpOiOS4ujvHP4etln18fmIxA5R5fll0g==",
|
||||
"dev": true
|
||||
},
|
||||
"media-typer": {
|
||||
"version": "0.3.0",
|
||||
"resolved": "https://registry.npmjs.org/media-typer/-/media-typer-0.3.0.tgz",
|
||||
@ -27502,6 +27624,12 @@
|
||||
"integrity": "sha512-/aCDEGatGvZ2BIk+HmLf4ifCJFwvKFNb9/JeZPMulfgFracn9QFcAf5GO8B/mweUjSoblS5In0cWhqpfs/5PQA==",
|
||||
"dev": true
|
||||
},
|
||||
"uc.micro": {
|
||||
"version": "1.0.6",
|
||||
"resolved": "https://registry.npmjs.org/uc.micro/-/uc.micro-1.0.6.tgz",
|
||||
"integrity": "sha512-8Y75pvTYkLJW2hWQHXxoqRgV7qb9B+9vFEtidML+7koHUFapnVJAZ6cKs+Qjz5Aw3aZWHMC6u0wJE3At+nSGwA==",
|
||||
"dev": true
|
||||
},
|
||||
"uglify-js": {
|
||||
"version": "3.4.10",
|
||||
"resolved": "https://registry.npmjs.org/uglify-js/-/uglify-js-3.4.10.tgz",
|
||||
@ -27532,6 +27660,12 @@
|
||||
"which-boxed-primitive": "^1.0.2"
|
||||
}
|
||||
},
|
||||
"underscore": {
|
||||
"version": "1.13.6",
|
||||
"resolved": "https://registry.npmjs.org/underscore/-/underscore-1.13.6.tgz",
|
||||
"integrity": "sha512-+A5Sja4HP1M08MaXya7p5LvjuM7K6q/2EaC0+iovj/wOcMsTzMvDFbasi/oSapiwOlt252IqsKqPjCl7huKS0A==",
|
||||
"dev": true
|
||||
},
|
||||
"unicode-canonical-property-names-ecmascript": {
|
||||
"version": "2.0.0",
|
||||
"resolved": "https://registry.npmjs.org/unicode-canonical-property-names-ecmascript/-/unicode-canonical-property-names-ecmascript-2.0.0.tgz",
|
||||
|
||||
@ -7,12 +7,14 @@
|
||||
"build": "vue-cli-service build && node ../copy.js",
|
||||
"lint": "vue-cli-service lint",
|
||||
"buildLibrary": "vue-cli-service build --target lib --name simpleMindMap ../simple-mind-map/index.js --dest ../simple-mind-map/dist",
|
||||
"format": "prettier --write src/* src/*/* src/*/*/* src/*/*/*/*"
|
||||
"format": "prettier --write src/* src/*/* src/*/*/* src/*/*/*/*",
|
||||
"buildDoc": "node ./scripts/buildDoc.js"
|
||||
},
|
||||
"dependencies": {
|
||||
"@toast-ui/editor": "^3.1.5",
|
||||
"core-js": "^3.6.5",
|
||||
"element-ui": "^2.15.1",
|
||||
"highlight.js": "^10.7.3",
|
||||
"v-viewer": "^1.6.4",
|
||||
"vue": "^2.6.11",
|
||||
"vue-i18n": "^8.27.2",
|
||||
@ -29,6 +31,8 @@
|
||||
"eslint-plugin-vue": "^6.2.2",
|
||||
"less": "^3.12.2",
|
||||
"less-loader": "^7.1.0",
|
||||
"markdown-it": "^13.0.1",
|
||||
"markdown-it-checkbox": "^1.1.0",
|
||||
"prettier": "^1.19.1",
|
||||
"vue-template-compiler": "^2.6.11",
|
||||
"webpack": "^4.44.2"
|
||||
|
||||
105
web/scripts/buildDoc.js
Normal file
105
web/scripts/buildDoc.js
Normal file
@ -0,0 +1,105 @@
|
||||
// 编译文档
|
||||
const path = require('path')
|
||||
const fs = require('fs')
|
||||
const hljs = require('highlight.js')
|
||||
const md = require('markdown-it')({
|
||||
highlight: function(str, lang) {
|
||||
if (lang && hljs.getLanguage(lang)) {
|
||||
try {
|
||||
return (
|
||||
'<pre class="hljs"><code>' +
|
||||
hljs.highlight(lang, str, true).value +
|
||||
'</code></pre>'
|
||||
)
|
||||
} catch (__) {}
|
||||
}
|
||||
|
||||
return (
|
||||
'<pre class="hljs"><code>' + md.utils.escapeHtml(str) + '</code></pre>'
|
||||
)
|
||||
}
|
||||
}).use(require('markdown-it-checkbox'))
|
||||
|
||||
// 文档语言种类
|
||||
let langList = ['zh', 'en']
|
||||
|
||||
// 开始转换
|
||||
const transform = (dir, routerList) => {
|
||||
let dirs = fs.readdirSync(dir)
|
||||
dirs.forEach(item => {
|
||||
let cur = path.join(dir, item)
|
||||
if (fs.statSync(cur).isDirectory()) {
|
||||
compilerDir(cur, item, routerList)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 编译某种语言下的文档
|
||||
const compilerDir = (dir, dirName, routerList) => {
|
||||
let files = fs.readdirSync(dir)
|
||||
files.forEach(file => {
|
||||
if (file.endsWith('.md')) {
|
||||
compilerFile(dir, file, dirName, routerList)
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
// 编译具体的文档
|
||||
const compilerFile = (dir, file, dirName, routerList) => {
|
||||
let filePath = path.join(dir, file)
|
||||
let destPath = path.join(dir, './index.vue')
|
||||
let templatePath = path.join(__dirname, '../src/pages/Doc/Template.vue')
|
||||
let content = fs.readFileSync(filePath, 'utf-8')
|
||||
let title = /(^|\n\r)\s*#\s+([^\n\r]+)/g.exec(content)
|
||||
if (title && title[2]) {
|
||||
addRouter(dirName, routerList, title[2])
|
||||
}
|
||||
let result = md.render(content)
|
||||
let template = fs.readFileSync(templatePath, 'utf-8')
|
||||
let doc = template.replace('$$$$', result)
|
||||
fs.writeFileSync(destPath, doc)
|
||||
}
|
||||
|
||||
// 收集文档路由
|
||||
const addRouter = (item, routerList, title) => {
|
||||
routerList.push({
|
||||
path: item,
|
||||
title
|
||||
})
|
||||
}
|
||||
|
||||
// 创建路由
|
||||
const createRouter = () => {
|
||||
let content = `
|
||||
export default ${JSON.stringify(
|
||||
routerTypeList.map(item => {
|
||||
return {
|
||||
lang: item.lang,
|
||||
children: item.routerList
|
||||
}
|
||||
})
|
||||
)}
|
||||
`
|
||||
fs.writeFileSync(
|
||||
path.join(__dirname, '../src/pages/Doc/routerList.js'),
|
||||
content
|
||||
)
|
||||
}
|
||||
|
||||
// 创建目录列表
|
||||
const createCatalogList = () => {}
|
||||
|
||||
// 开始编译
|
||||
let routerTypeList = []
|
||||
langList.forEach(lang => {
|
||||
let dir = path.join(__dirname, '../src/pages/Doc/', `./${lang}/`)
|
||||
let routerList = []
|
||||
transform(dir, routerList)
|
||||
routerTypeList.push({
|
||||
lang,
|
||||
routerList
|
||||
})
|
||||
})
|
||||
// 创建路由
|
||||
createRouter()
|
||||
console.log('编译完成')
|
||||
@ -54,6 +54,12 @@
|
||||
<div class="content unicode" style="display: block;">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">github</div>
|
||||
<div class="code-name">&#xe64f;</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont"></span>
|
||||
<div class="name">选择</div>
|
||||
@ -342,9 +348,9 @@
|
||||
<pre><code class="language-css"
|
||||
>@font-face {
|
||||
font-family: 'iconfont';
|
||||
src: url('iconfont.woff2?t=1668512547595') format('woff2'),
|
||||
url('iconfont.woff?t=1668512547595') format('woff'),
|
||||
url('iconfont.ttf?t=1668512547595') format('truetype');
|
||||
src: url('iconfont.woff2?t=1673600274529') format('woff2'),
|
||||
url('iconfont.woff?t=1673600274529') format('woff'),
|
||||
url('iconfont.ttf?t=1673600274529') format('truetype');
|
||||
}
|
||||
</code></pre>
|
||||
<h3 id="-iconfont-">第二步：定义使用 iconfont 的样式</h3>
|
||||
@ -370,6 +376,15 @@
|
||||
<div class="content font-class">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont icongithub"></span>
|
||||
<div class="name">
|
||||
github
|
||||
</div>
|
||||
<div class="code-name">.icongithub
|
||||
</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<span class="icon iconfont iconchoose1"></span>
|
||||
<div class="name">
|
||||
@ -802,6 +817,14 @@
|
||||
<div class="content symbol">
|
||||
<ul class="icon_lists dib-box">
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#icongithub"></use>
|
||||
</svg>
|
||||
<div class="name">github</div>
|
||||
<div class="code-name">#icongithub</div>
|
||||
</li>
|
||||
|
||||
<li class="dib">
|
||||
<svg class="icon svg-icon" aria-hidden="true">
|
||||
<use xlink:href="#iconchoose1"></use>
|
||||
|
||||
@ -1,8 +1,8 @@
|
||||
@font-face {
|
||||
font-family: "iconfont"; /* Project id 2479351 */
|
||||
src: url('iconfont.woff2?t=1668512547595') format('woff2'),
|
||||
url('iconfont.woff?t=1668512547595') format('woff'),
|
||||
url('iconfont.ttf?t=1668512547595') format('truetype');
|
||||
src: url('iconfont.woff2?t=1673600274529') format('woff2'),
|
||||
url('iconfont.woff?t=1673600274529') format('woff'),
|
||||
url('iconfont.ttf?t=1673600274529') format('truetype');
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
@ -13,6 +13,10 @@
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
.icongithub:before {
|
||||
content: "\e64f";
|
||||
}
|
||||
|
||||
.iconchoose1:before {
|
||||
content: "\e6c5";
|
||||
}
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -5,6 +5,13 @@
|
||||
"css_prefix_text": "icon",
|
||||
"description": "思维导图",
|
||||
"glyphs": [
|
||||
{
|
||||
"icon_id": "8760187",
|
||||
"name": "github",
|
||||
"font_class": "github",
|
||||
"unicode": "e64f",
|
||||
"unicode_decimal": 58959
|
||||
},
|
||||
{
|
||||
"icon_id": "1009019",
|
||||
"name": "选择",
|
||||
|
||||
Binary file not shown.
Binary file not shown.
Binary file not shown.
191
web/src/pages/Doc/Index.vue
Normal file
191
web/src/pages/Doc/Index.vue
Normal file
@ -0,0 +1,191 @@
|
||||
<template>
|
||||
<div class="docContainer">
|
||||
<Header></Header>
|
||||
<div class="content">
|
||||
<Sidebar></Sidebar>
|
||||
<div class="doc" ref="doc" id="doc" @scroll="onScroll">
|
||||
<router-view></router-view>
|
||||
</div>
|
||||
<CatalogBar :scrollTop="scrollTop" @scroll="doScroll"></CatalogBar>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import Header from './components/Header.vue'
|
||||
import Sidebar from './components/Sidebar.vue'
|
||||
import CatalogBar from './components/CatalogBar.vue'
|
||||
import 'highlight.js/styles/atom-one-dark.css'
|
||||
|
||||
export default {
|
||||
components: {
|
||||
Header,
|
||||
Sidebar,
|
||||
CatalogBar
|
||||
},
|
||||
data () {
|
||||
return {
|
||||
scrollTop: 0,
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
doScroll(top) {
|
||||
this.$nextTick(() => {
|
||||
try {
|
||||
this.$refs.doc.scrollTop = top
|
||||
} catch (error) {
|
||||
console.log(error)
|
||||
}
|
||||
})
|
||||
},
|
||||
|
||||
onScroll() {
|
||||
this.scrollTop = this.$refs.doc.scrollTop
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less">
|
||||
.docContainer {
|
||||
position: absolute;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
font-family: Quotes, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
|
||||
Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
|
||||
sans-serif;
|
||||
|
||||
.content {
|
||||
display: flex;
|
||||
flex-grow: 1;
|
||||
overflow: hidden;
|
||||
|
||||
.doc {
|
||||
overflow: auto;
|
||||
flex-grow: 1;
|
||||
font-weight: 400;
|
||||
color: #213547;
|
||||
font-size: 16px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
line-height: 1.7;
|
||||
padding: 30px;
|
||||
|
||||
h1 {
|
||||
margin: 30px 0;
|
||||
font-size: 38px;
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
h2 {
|
||||
margin: 20px 0;
|
||||
border-top: 1px solid rgba(60, 60, 60, 0.12);
|
||||
font-size: 24px;
|
||||
padding-top: 10px;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 19px;
|
||||
margin: 10px 0;
|
||||
}
|
||||
|
||||
p {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
a {
|
||||
font-weight: 500;
|
||||
text-decoration: none;
|
||||
color: #42b883;
|
||||
transition: color 0.25s;
|
||||
|
||||
&:hover {
|
||||
color: #33a06f;
|
||||
}
|
||||
}
|
||||
|
||||
pre {
|
||||
margin-bottom: 20px;
|
||||
border-radius: 5px;
|
||||
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||
|
||||
code {
|
||||
font-family: Menlo, Monaco, Consolas, 'Courier New', monospace;
|
||||
}
|
||||
}
|
||||
|
||||
:not(pre) > code {
|
||||
background-color: #f1f1f1;
|
||||
padding: 0.15em 0.5em;
|
||||
border-radius: 4px;
|
||||
color: #476582;
|
||||
transition: color 0.5s, background-color 0.5s;
|
||||
font-family: Quotes, -apple-system, BlinkMacSystemFont, 'Segoe UI',
|
||||
Roboto, Oxygen, Ubuntu, Cantarell, 'Fira Sans', 'Droid Sans',
|
||||
'Helvetica Neue', sans-serif;
|
||||
}
|
||||
|
||||
input[type='checkbox'] {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
||||
ul {
|
||||
list-style: none;
|
||||
padding-left: 1.25rem;
|
||||
|
||||
> li {
|
||||
position: relative;
|
||||
margin: 1px 0;
|
||||
|
||||
&:before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 5px;
|
||||
height: 5px;
|
||||
border-radius: 50%;
|
||||
background-color: rgba(60, 60, 60, 0.33);
|
||||
transition: background-color 0.5s;
|
||||
left: -1.25rem;
|
||||
top: 0.75rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
table {
|
||||
border-collapse: collapse;
|
||||
border-spacing: 0;
|
||||
margin-top: 0.8rem;
|
||||
margin-bottom: 1.4rem;
|
||||
}
|
||||
|
||||
tr {
|
||||
background-color: #fff;
|
||||
border-top: 1px solid #ccc;
|
||||
}
|
||||
|
||||
th,
|
||||
td {
|
||||
padding: 5px 14px;
|
||||
border: 1px solid #ddd;
|
||||
}
|
||||
|
||||
blockquote {
|
||||
margin: 1rem 0;
|
||||
border-left: 0.2rem solid rgba(60, 60, 60, 0.29);
|
||||
padding-left: 1rem;
|
||||
transition: border-color 0.5s;
|
||||
|
||||
> p {
|
||||
margin: 0;
|
||||
font-size: 16px;
|
||||
color: rgba(60, 60, 60, 0.7);
|
||||
transition: color 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
15
web/src/pages/Doc/Template.vue
Normal file
15
web/src/pages/Doc/Template.vue
Normal file
@ -0,0 +1,15 @@
|
||||
<template>
|
||||
<div>
|
||||
$$$$
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
75
web/src/pages/Doc/catalogList.js
Normal file
75
web/src/pages/Doc/catalogList.js
Normal file
@ -0,0 +1,75 @@
|
||||
import routerList from './routerList'
|
||||
|
||||
let langList = [
|
||||
{
|
||||
name: '中文',
|
||||
path: 'zh'
|
||||
},
|
||||
{
|
||||
name: 'English',
|
||||
path: 'en'
|
||||
}
|
||||
]
|
||||
let StartList = ['introduction', 'start', 'translate', 'changelog']
|
||||
let APIList = [
|
||||
'constructor',
|
||||
'node',
|
||||
'render',
|
||||
'view',
|
||||
'miniMap',
|
||||
'doExport',
|
||||
'keyCommand',
|
||||
'keyboardNavigation',
|
||||
'command',
|
||||
'select',
|
||||
'batchExecution',
|
||||
'utils'
|
||||
]
|
||||
|
||||
const createList = (lang, list) => {
|
||||
let langRouter = routerList.find(item => {
|
||||
return item.lang === lang
|
||||
})
|
||||
let children = langRouter.children
|
||||
return list
|
||||
.filter(item => {
|
||||
return children.find(child => {
|
||||
return child.path === item
|
||||
})
|
||||
})
|
||||
.map(item => {
|
||||
return {
|
||||
path: item,
|
||||
name: children.find(child => {
|
||||
return child.path === item
|
||||
}).title
|
||||
}
|
||||
})
|
||||
}
|
||||
|
||||
export default {
|
||||
zh: [
|
||||
{
|
||||
groupName: '开始',
|
||||
list: createList('zh', StartList)
|
||||
},
|
||||
{
|
||||
groupName: 'API',
|
||||
list: createList('zh', APIList)
|
||||
}
|
||||
],
|
||||
en: [
|
||||
{
|
||||
groupName: 'Start',
|
||||
list: createList('en', StartList)
|
||||
},
|
||||
{
|
||||
groupName: 'API',
|
||||
list: createList('en', APIList)
|
||||
}
|
||||
]
|
||||
}
|
||||
|
||||
export {
|
||||
langList
|
||||
}
|
||||
236
web/src/pages/Doc/components/CatalogBar.vue
Normal file
236
web/src/pages/Doc/components/CatalogBar.vue
Normal file
@ -0,0 +1,236 @@
|
||||
<template>
|
||||
<div class="catalogBarContainer">
|
||||
<div class="catalogBarTitle">{{ pageCatalogTitle }}</div>
|
||||
<div class="catalogList">
|
||||
<div
|
||||
class="catalogItem"
|
||||
v-for="(item, index) in list"
|
||||
:key="item.title + index"
|
||||
:class="{ active: item.title === activeCatalog }"
|
||||
@click="scrollTo(item, index)"
|
||||
>
|
||||
{{ item.title }}
|
||||
</div>
|
||||
<div
|
||||
v-if="activeCatalogIndex !== -1"
|
||||
class="activeBar"
|
||||
:style="{ top: 4 + activeCatalogIndex * 28 + 'px' }"
|
||||
></div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import t from '../i18n'
|
||||
|
||||
export default {
|
||||
props: {
|
||||
scrollTop: {
|
||||
type: Number
|
||||
}
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
lang: '',
|
||||
list: [],
|
||||
activeCatalog: '',
|
||||
activeCatalogIndex: -1,
|
||||
appointCatalog: true
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
pageCatalogTitle() {
|
||||
return t('pageCatalog', this.lang)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route(newVal, oldVal) {
|
||||
this.initLang()
|
||||
this.initCatalogList(newVal.path, oldVal.path)
|
||||
},
|
||||
scrollTop() {
|
||||
this.onScroll()
|
||||
},
|
||||
lang(newVal, oldVal) {
|
||||
console.log(newVal, oldVal)
|
||||
if (!oldVal) {
|
||||
return
|
||||
}
|
||||
this.initCatalogList()
|
||||
}
|
||||
},
|
||||
mounted() {
|
||||
this.initLang()
|
||||
this.initCatalogList()
|
||||
this.scrollToCatalog()
|
||||
},
|
||||
methods: {
|
||||
// 获取当前语言
|
||||
initLang() {
|
||||
let lang = /^\/doc\/([^\/]+)\//.exec(this.$route.path)
|
||||
if (lang && lang[1]) {
|
||||
this.lang = lang[1]
|
||||
}
|
||||
},
|
||||
|
||||
// 初始化二级标题目录
|
||||
initCatalogList(newPath, oldPath) {
|
||||
let newPathRes = /^\/doc\/[^\/]+\/([^\/]+)/.exec(newPath)
|
||||
let oldPathRes = /^\/doc\/[^\/]+\/([^\/]+)/.exec(oldPath)
|
||||
// 语言变了、章节变了，需要重新获取二级标题目录
|
||||
if ((!newPath && !oldPath) || newPathRes[1] !== oldPathRes[1]) {
|
||||
this.$emit('scroll', 0)
|
||||
this.resetActive()
|
||||
let container = document.getElementById('doc')
|
||||
let els = document.querySelectorAll('#doc h2')
|
||||
this.list = Array.from(els).map(item => {
|
||||
return {
|
||||
title: item.textContent,
|
||||
top: item.offsetTop - container.offsetTop
|
||||
}
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
// 如果url中存在二级标题，那么滚动到该标题所在位置
|
||||
scrollToCatalog() {
|
||||
let url = /^\/doc\/[^\/]+\/[^\/]+\/([^\/]+)($|\/)/.exec(this.$route.path)
|
||||
if (url && url[1]) {
|
||||
let h = decodeURIComponent(url[1])
|
||||
let item = this.list.find(item => {
|
||||
return item.title === h
|
||||
})
|
||||
let index = this.list.findIndex(item => {
|
||||
return item.title === h
|
||||
})
|
||||
if (item) {
|
||||
this.activeCatalog = item.title
|
||||
this.activeCatalogIndex = index
|
||||
this.$emit('scroll', item.top)
|
||||
}
|
||||
}
|
||||
},
|
||||
|
||||
// 手动点击切换到指定二级标题
|
||||
scrollTo(item, index) {
|
||||
this.appointCatalog = true
|
||||
this.routeToNewCatalog(item.title)
|
||||
this.$nextTick(() => {
|
||||
this.activeCatalog = item.title
|
||||
this.activeCatalogIndex = index
|
||||
this.scrollToCatalog()
|
||||
})
|
||||
},
|
||||
|
||||
// 路由到指定二级标题
|
||||
routeToNewCatalog(title) {
|
||||
let path = this.$route.path
|
||||
let url = ''
|
||||
if (!title) {
|
||||
url = path.replace(/^(\/doc\/[^\/]+\/[^\/]+)($|\/|.*)$/, '$1')
|
||||
} else if (/^\/doc\/[^\/]+\/[^\/]+($|\/)$/.test(path)) {
|
||||
url = path.replace(
|
||||
/^(\/doc\/[^\/]+\/[^\/]+)($|\/)$/,
|
||||
'$1/' + encodeURIComponent(title)
|
||||
)
|
||||
} else {
|
||||
url = path.replace(
|
||||
/^(\/doc\/[^\/]+\/[^\/]+\/)([^\/]+)($|\/)/,
|
||||
(...args) => {
|
||||
return args[1] + encodeURIComponent(title)
|
||||
}
|
||||
)
|
||||
}
|
||||
if (path === url) {
|
||||
return
|
||||
}
|
||||
this.$router.push(url)
|
||||
},
|
||||
|
||||
// 文档滚动时判断当前滚动到哪个二级标题
|
||||
onScroll() {
|
||||
if (this.appointCatalog) {
|
||||
this.appointCatalog = false
|
||||
return
|
||||
}
|
||||
let find = false
|
||||
for (let i = 0; i < this.list.length; i++) {
|
||||
let cur = this.list[i]
|
||||
let next = this.list[i + 1]
|
||||
if (this.scrollTop >= cur.top && (!next || this.scrollTop < next.top)) {
|
||||
find = true
|
||||
if (cur.title === this.activeCatalog) {
|
||||
break
|
||||
}
|
||||
this.activeCatalog = cur.title
|
||||
this.activeCatalogIndex = i
|
||||
this.routeToNewCatalog(cur.title)
|
||||
break
|
||||
}
|
||||
}
|
||||
if (!find) {
|
||||
this.resetActive()
|
||||
this.routeToNewCatalog('')
|
||||
}
|
||||
},
|
||||
|
||||
resetActive() {
|
||||
this.activeCatalog = ''
|
||||
this.activeCatalogIndex = -1
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.catalogBarContainer {
|
||||
width: 20%;
|
||||
flex-shrink: 0;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 30px;
|
||||
padding-left: 20px;
|
||||
|
||||
.catalogBarTitle {
|
||||
font-weight: 700;
|
||||
margin-bottom: 4px;
|
||||
text-transform: uppercase;
|
||||
font-size: 11px;
|
||||
letter-spacing: 0.4px;
|
||||
}
|
||||
|
||||
.catalogList {
|
||||
position: relative;
|
||||
|
||||
.catalogItem {
|
||||
color: rgba(60, 60, 60, 0.7);
|
||||
transition: color 0.5s;
|
||||
line-height: 28px;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
|
||||
&.active {
|
||||
color: rgba(60, 60, 60, 1);
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.activeBar {
|
||||
position: absolute;
|
||||
left: -10px;
|
||||
width: 4px;
|
||||
height: 20px;
|
||||
background-color: #42b883;
|
||||
border-radius: 4px;
|
||||
transition: top 0.25s cubic-bezier(0, 1, 0.5, 1), opacity 0.25s,
|
||||
background-color 0.5s;
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
161
web/src/pages/Doc/components/Header.vue
Normal file
161
web/src/pages/Doc/components/Header.vue
Normal file
@ -0,0 +1,161 @@
|
||||
<template>
|
||||
<div class="headerContainer">
|
||||
<div class="left">
|
||||
<div class="title">SimpleMindMap</div>
|
||||
</div>
|
||||
<div class="center">
|
||||
<div class="btn" @click="toDemo">{{ demoName }}</div>
|
||||
<el-dropdown
|
||||
trigger="click"
|
||||
placement="bottom-start"
|
||||
@command="handleCommand"
|
||||
>
|
||||
<span class="translateBtn">
|
||||
{{ currentLangName }}<i class="el-icon-arrow-down el-icon--right"></i>
|
||||
</span>
|
||||
<el-dropdown-menu slot="dropdown">
|
||||
<el-dropdown-item
|
||||
v-for="item in otherLangList"
|
||||
:key="item.path"
|
||||
:command="item.path"
|
||||
>{{ item.name }}</el-dropdown-item
|
||||
>
|
||||
</el-dropdown-menu>
|
||||
</el-dropdown>
|
||||
|
||||
<a href="https://github.com/wanglin2/mind-map" target="_blank">
|
||||
<span class="iconfont icongithub"></span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="right"></div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import { langList } from '../catalogList'
|
||||
import t from '../i18n'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
lang: '',
|
||||
currentLangName: '',
|
||||
otherLangList: []
|
||||
}
|
||||
},
|
||||
computed: {
|
||||
demoName() {
|
||||
return t('demo', this.lang)
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.init()
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.init()
|
||||
},
|
||||
methods: {
|
||||
init() {
|
||||
let lang = /^\/doc\/([^\/]+)\//.exec(this.$route.path)
|
||||
if (lang && lang[1]) {
|
||||
this.lang = lang[1]
|
||||
let currentLang = langList.find(item => {
|
||||
return item.path === this.lang
|
||||
})
|
||||
this.currentLangName = currentLang.name
|
||||
this.otherLangList = langList.filter(item => {
|
||||
return item.path !== this.lang
|
||||
})
|
||||
}
|
||||
},
|
||||
|
||||
toDemo() {
|
||||
this.$router.push('/')
|
||||
},
|
||||
|
||||
handleCommand(path) {
|
||||
let url = this.$route.path.replace(/^\/doc\/([^\/]+)\//, (...args) => {
|
||||
return `/doc/${path}/`
|
||||
})
|
||||
this.$router.push(url)
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.headerContainer {
|
||||
height: 55px;
|
||||
border-bottom: 1px solid rgba(60, 60, 60, 0.12);
|
||||
flex-shrink: 0;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
|
||||
.left {
|
||||
width: 30%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: flex-end;
|
||||
|
||||
.title {
|
||||
width: 200px;
|
||||
font-size: 24px;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
||||
.center {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
flex-grow: 1;
|
||||
justify-content: flex-end;
|
||||
|
||||
.btn {
|
||||
color: #213547;
|
||||
cursor: pointer;
|
||||
transition: color 0.5s;
|
||||
margin-right: 15px;
|
||||
font-size: 14px;
|
||||
|
||||
&:hover {
|
||||
color: #42b883;
|
||||
}
|
||||
}
|
||||
|
||||
.translateBtn {
|
||||
margin-right: 15px;
|
||||
font-size: 16px;
|
||||
color: #213547;
|
||||
cursor: pointer;
|
||||
margin-top: 1px;
|
||||
display: block;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
a {
|
||||
text-decoration: none;
|
||||
color: rgba(60, 60, 60, 0.7);
|
||||
transition: color 0.5s;
|
||||
margin-right: 15px;
|
||||
|
||||
&:last-of-type {
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
&:hover {
|
||||
color: rgba(60, 60, 60, 1);
|
||||
}
|
||||
|
||||
.iconfont {
|
||||
font-size: 30px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.right {
|
||||
width: 20%;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
118
web/src/pages/Doc/components/Sidebar.vue
Normal file
118
web/src/pages/Doc/components/Sidebar.vue
Normal file
@ -0,0 +1,118 @@
|
||||
<template>
|
||||
<div class="sideBarContainer">
|
||||
<div class="catalogGroupList">
|
||||
<div
|
||||
class="catalogGroup"
|
||||
v-for="(group, groupIndex) in groupList"
|
||||
:key="groupIndex"
|
||||
>
|
||||
<div class="catalogGroupName">{{ group.groupName }}</div>
|
||||
<div class="catalogList">
|
||||
<div
|
||||
class="catalogItem"
|
||||
v-for="item in group.list"
|
||||
:key="groupIndex + item.path"
|
||||
:class="{ active: item.path === currentPath }"
|
||||
@click="jump(item)"
|
||||
>
|
||||
{{ item.name }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
import catalogList from '../catalogList'
|
||||
|
||||
export default {
|
||||
data() {
|
||||
return {
|
||||
groupList: [],
|
||||
lang: '',
|
||||
currentPath: ''
|
||||
}
|
||||
},
|
||||
created() {
|
||||
this.initCatalog()
|
||||
},
|
||||
watch: {
|
||||
$route() {
|
||||
this.initCatalog()
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
jump(item) {
|
||||
if (item.path === this.currentPath) {
|
||||
return
|
||||
}
|
||||
this.$router.push(`/doc/${this.lang}/${item.path}`)
|
||||
},
|
||||
|
||||
initCatalog() {
|
||||
// 目录列表
|
||||
let lang = /^\/doc\/([^\/]+)\//.exec(this.$route.path)
|
||||
if (lang && lang[1]) {
|
||||
this.lang = lang[1]
|
||||
this.groupList = catalogList[this.lang]
|
||||
}
|
||||
// 当前所在路径
|
||||
let path = /^\/doc\/[^\/]+\/([^\/]+)(\/|$)/.exec(this.$route.path)
|
||||
if (path && path[1]) {
|
||||
this.currentPath = path[1]
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style lang="less" scoped>
|
||||
.sideBarContainer {
|
||||
width: 30%;
|
||||
overflow-x: hidden;
|
||||
overflow-y: auto;
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
padding-top: 60px;
|
||||
padding-bottom: 30px;
|
||||
flex-shrink: 0;
|
||||
|
||||
.catalogGroupList {
|
||||
width: 200px;
|
||||
|
||||
.catalogGroup {
|
||||
padding-bottom: 16px;
|
||||
|
||||
.catalogGroupName {
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 600;
|
||||
color: #213547;
|
||||
transition: color 0.5s;
|
||||
padding: 4px 0;
|
||||
}
|
||||
|
||||
.catalogList {
|
||||
.catalogItem {
|
||||
line-height: 20px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: rgba(60, 60, 60, 0.7);
|
||||
transition: color 0.5s;
|
||||
cursor: pointer;
|
||||
padding: 4px 0;
|
||||
|
||||
&:hover {
|
||||
color: rgba(60, 60, 60, 1);
|
||||
}
|
||||
|
||||
&.active {
|
||||
color: #42b883;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</style>
|
||||
16
web/src/pages/Doc/en/batchExecution/index.md
Normal file
16
web/src/pages/Doc/en/batchExecution/index.md
Normal file
@ -0,0 +1,16 @@
|
||||
# batchExecution instance
|
||||
|
||||
The `batchExecution` is used to batch asynchronously perform some operations,
|
||||
and if a certain operation is called multiple times at the same time, it will
|
||||
only be executed once in the next event loop. Can be obtained through
|
||||
`mindMap.batchExecution`
|
||||
|
||||
## Method
|
||||
|
||||
### push(name, fn)
|
||||
|
||||
Add task.
|
||||
|
||||
`name`: task name
|
||||
|
||||
`fn`: task
|
||||
25
web/src/pages/Doc/en/batchExecution/index.vue
Normal file
25
web/src/pages/Doc/en/batchExecution/index.vue
Normal file
@ -0,0 +1,25 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>batchExecution instance</h1>
|
||||
<p>The <code>batchExecution</code> is used to batch asynchronously perform some operations,
|
||||
and if a certain operation is called multiple times at the same time, it will
|
||||
only be executed once in the next event loop. Can be obtained through
|
||||
<code>mindMap.batchExecution</code></p>
|
||||
<h2>Method</h2>
|
||||
<h3>push(name, fn)</h3>
|
||||
<p>Add task.</p>
|
||||
<p><code>name</code>: task name</p>
|
||||
<p><code>fn</code>: task</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
145
web/src/pages/Doc/en/changelog/index.md
Normal file
145
web/src/pages/Doc/en/changelog/index.md
Normal file
@ -0,0 +1,145 @@
|
||||
# Changelog
|
||||
|
||||
## 0.2.23
|
||||
|
||||
New: Support register new theme.
|
||||
|
||||
## 0.2.22
|
||||
|
||||
optimization：The theme and structure pictures of the built-in `simple-mind-map` package are removed and replaced by user self-maintenance. The original pictures can be found in the `web/assets/img/` directory.
|
||||
|
||||
## 0.2.21
|
||||
|
||||
New: Support node horizontal line style.
|
||||
|
||||
## 0.2.20
|
||||
|
||||
fix：When the distance from the canvas to the upper left corner of the window is not 0, the node dragging will have an offset problem.
|
||||
|
||||
## 0.2.19
|
||||
|
||||
fix：When the node is not activated, pressing any key will trigger the problem of automatic focus.
|
||||
|
||||
## 0.2.18
|
||||
|
||||
optimization：Keyboard navigation algorithm for finding focus, supporting simple algorithm, region algorithm and shadow algorithm.
|
||||
|
||||
## 0.2.17
|
||||
|
||||
New：Keyboard navigation, that is, switch the active nodes through the direction keys; The node text content can be edited directly in the outline.
|
||||
|
||||
## 0.2.16
|
||||
|
||||
optimization：Mini map; drag performance.
|
||||
|
||||
## 0.2.15
|
||||
|
||||
optimization：Local file editing.
|
||||
|
||||
New：Double-click the image in the node to preview the large image.
|
||||
|
||||
## 0.2.14
|
||||
|
||||
optimization：Automatically expand when inserting child nodes.
|
||||
|
||||
fix：The error occurred when the mini map was closed.
|
||||
|
||||
## 0.2.13
|
||||
|
||||
fix：The child node is missing when collapsing state replication.
|
||||
|
||||
## 0.2.11
|
||||
|
||||
fix：Fix the problem that is lost when the child node collapses state replication.
|
||||
|
||||
New：Support mini map.
|
||||
|
||||
## 0.2.10
|
||||
|
||||
optimization：Focus immediately when you manually create a node.
|
||||
|
||||
fix：Connection style depth update problem.
|
||||
|
||||
New：Logical structure diagram and mind map add linear connection style and direct connection style.
|
||||
|
||||
## 0.2.9
|
||||
|
||||
New：Support the creation, opening and saving of local files on the computer.
|
||||
|
||||
## 0.2.8
|
||||
|
||||
fix：Xmind8 version file import failed.
|
||||
|
||||
New：Expanding to the specified level is supported.
|
||||
|
||||
## 0.2.7
|
||||
|
||||
fix：The root node adds multiple nodes to burst the stack.
|
||||
|
||||
New：Support import .xmind file.
|
||||
|
||||
## 0.2.6
|
||||
|
||||
New：The title tag is added when exporting svg.
|
||||
|
||||
## 0.2.5
|
||||
|
||||
fix：Bugs caused by node expansion and collapse.
|
||||
|
||||
New：Node supports custom line styles.
|
||||
|
||||
## 0.2.4
|
||||
|
||||
New：Nodes support multiple shapes.
|
||||
|
||||
## 0.2.3
|
||||
|
||||
fix：Shortcut key conflicts when editing node text; Right-click menu shortcut prompt error; Right-click menu shortcut prompt.
|
||||
|
||||
## 0.2.2
|
||||
|
||||
fix：The input string '/' conflicts with the shortcut key '/'.
|
||||
|
||||
## 0.2.1
|
||||
|
||||
New：Support export as pdf.
|
||||
|
||||
## 0.2.0
|
||||
|
||||
New：Classic4 theme；Support adding summary; Support free drag; Move Node Up, Move Node Down, Copy Node, Cut Node, Paste Node, One-click Organize Cloth Shortcut; Library packaging; Ctrl+left click to select multiple.
|
||||
|
||||
## 0.1.18
|
||||
|
||||
fix：The problem that the node icon cannot be deleted; The tool button is grayed out and can still be clicked.
|
||||
|
||||
## 0.1.17
|
||||
|
||||
New：Add read-only mode.
|
||||
|
||||
## 0.1.16
|
||||
|
||||
New：Node notes support markdown and rich text.
|
||||
|
||||
fix：Can't select text; Node annotations cannot hide problems after node activation; When editing text such as hyperlinks, notes, labels, etc., the return key and return key conflict with the shortcut key of mind map.
|
||||
|
||||
## 0.1.15
|
||||
|
||||
New：The status data supports saving the active status and view status (drag position, zoom value)；Support node drag.
|
||||
|
||||
## 0.1.14
|
||||
|
||||
fix：There are problems with setting topics when activating nodes.
|
||||
|
||||
## 0.1.13
|
||||
|
||||
New：Shortcut key function; Support export as json。
|
||||
|
||||
optimization：Some details.
|
||||
|
||||
## 0.1.12
|
||||
|
||||
New：Local storage；Right-click menu function, etc.
|
||||
|
||||
## 0.1.0
|
||||
|
||||
Complete basic functions.
|
||||
88
web/src/pages/Doc/en/changelog/index.vue
Normal file
88
web/src/pages/Doc/en/changelog/index.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.2.23</h2>
|
||||
<p>New: Support register new theme.</p>
|
||||
<h2>0.2.22</h2>
|
||||
<p>optimization：The theme and structure pictures of the built-in <code>simple-mind-map</code> package are removed and replaced by user self-maintenance. The original pictures can be found in the <code>web/assets/img/</code> directory.</p>
|
||||
<h2>0.2.21</h2>
|
||||
<p>New: Support node horizontal line style.</p>
|
||||
<h2>0.2.20</h2>
|
||||
<p>fix：When the distance from the canvas to the upper left corner of the window is not 0, the node dragging will have an offset problem.</p>
|
||||
<h2>0.2.19</h2>
|
||||
<p>fix：When the node is not activated, pressing any key will trigger the problem of automatic focus.</p>
|
||||
<h2>0.2.18</h2>
|
||||
<p>optimization：Keyboard navigation algorithm for finding focus, supporting simple algorithm, region algorithm and shadow algorithm.</p>
|
||||
<h2>0.2.17</h2>
|
||||
<p>New：Keyboard navigation, that is, switch the active nodes through the direction keys; The node text content can be edited directly in the outline.</p>
|
||||
<h2>0.2.16</h2>
|
||||
<p>optimization：Mini map; drag performance.</p>
|
||||
<h2>0.2.15</h2>
|
||||
<p>optimization：Local file editing.</p>
|
||||
<p>New：Double-click the image in the node to preview the large image.</p>
|
||||
<h2>0.2.14</h2>
|
||||
<p>optimization：Automatically expand when inserting child nodes.</p>
|
||||
<p>fix：The error occurred when the mini map was closed.</p>
|
||||
<h2>0.2.13</h2>
|
||||
<p>fix：The child node is missing when collapsing state replication.</p>
|
||||
<h2>0.2.11</h2>
|
||||
<p>fix：Fix the problem that is lost when the child node collapses state replication.</p>
|
||||
<p>New：Support mini map.</p>
|
||||
<h2>0.2.10</h2>
|
||||
<p>optimization：Focus immediately when you manually create a node.</p>
|
||||
<p>fix：Connection style depth update problem.</p>
|
||||
<p>New：Logical structure diagram and mind map add linear connection style and direct connection style.</p>
|
||||
<h2>0.2.9</h2>
|
||||
<p>New：Support the creation, opening and saving of local files on the computer.</p>
|
||||
<h2>0.2.8</h2>
|
||||
<p>fix：Xmind8 version file import failed.</p>
|
||||
<p>New：Expanding to the specified level is supported.</p>
|
||||
<h2>0.2.7</h2>
|
||||
<p>fix：The root node adds multiple nodes to burst the stack.</p>
|
||||
<p>New：Support import .xmind file.</p>
|
||||
<h2>0.2.6</h2>
|
||||
<p>New：The title tag is added when exporting svg.</p>
|
||||
<h2>0.2.5</h2>
|
||||
<p>fix：Bugs caused by node expansion and collapse.</p>
|
||||
<p>New：Node supports custom line styles.</p>
|
||||
<h2>0.2.4</h2>
|
||||
<p>New：Nodes support multiple shapes.</p>
|
||||
<h2>0.2.3</h2>
|
||||
<p>fix：Shortcut key conflicts when editing node text; Right-click menu shortcut prompt error; Right-click menu shortcut prompt.</p>
|
||||
<h2>0.2.2</h2>
|
||||
<p>fix：The input string '/' conflicts with the shortcut key '/'.</p>
|
||||
<h2>0.2.1</h2>
|
||||
<p>New：Support export as pdf.</p>
|
||||
<h2>0.2.0</h2>
|
||||
<p>New：Classic4 theme；Support adding summary; Support free drag; Move Node Up, Move Node Down, Copy Node, Cut Node, Paste Node, One-click Organize Cloth Shortcut; Library packaging; Ctrl+left click to select multiple.</p>
|
||||
<h2>0.1.18</h2>
|
||||
<p>fix：The problem that the node icon cannot be deleted; The tool button is grayed out and can still be clicked.</p>
|
||||
<h2>0.1.17</h2>
|
||||
<p>New：Add read-only mode.</p>
|
||||
<h2>0.1.16</h2>
|
||||
<p>New：Node notes support markdown and rich text.</p>
|
||||
<p>fix：Can't select text; Node annotations cannot hide problems after node activation; When editing text such as hyperlinks, notes, labels, etc., the return key and return key conflict with the shortcut key of mind map.</p>
|
||||
<h2>0.1.15</h2>
|
||||
<p>New：The status data supports saving the active status and view status (drag position, zoom value)；Support node drag.</p>
|
||||
<h2>0.1.14</h2>
|
||||
<p>fix：There are problems with setting topics when activating nodes.</p>
|
||||
<h2>0.1.13</h2>
|
||||
<p>New：Shortcut key function; Support export as json。</p>
|
||||
<p>optimization：Some details.</p>
|
||||
<h2>0.1.12</h2>
|
||||
<p>New：Local storage；Right-click menu function, etc.</p>
|
||||
<h2>0.1.0</h2>
|
||||
<p>Complete basic functions.</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
33
web/src/pages/Doc/en/command/index.md
Normal file
33
web/src/pages/Doc/en/command/index.md
Normal file
@ -0,0 +1,33 @@
|
||||
# command instance
|
||||
|
||||
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."
|
||||
|
||||
## Methods
|
||||
|
||||
### add(name, fn)
|
||||
|
||||
Add a command.
|
||||
|
||||
`name`: Command name
|
||||
|
||||
`fn`: Method to be executed by the command
|
||||
|
||||
### remove(name, fn)
|
||||
|
||||
Remove a command.
|
||||
|
||||
`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()
|
||||
|
||||
Get a copy of the rendering tree data
|
||||
|
||||
### clearHistory()
|
||||
|
||||
Clear the history stack data
|
||||
34
web/src/pages/Doc/en/command/index.vue
Normal file
34
web/src/pages/Doc/en/command/index.vue
Normal file
@ -0,0 +1,34 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>command instance</h1>
|
||||
<p>The <code>command</code> 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
|
||||
<code>mindMap.command</code> instance can be obtained through this."</p>
|
||||
<h2>Methods</h2>
|
||||
<h3>add(name, fn)</h3>
|
||||
<p>Add a command.</p>
|
||||
<p><code>name</code>: Command name</p>
|
||||
<p><code>fn</code>: Method to be executed by the command</p>
|
||||
<h3>remove(name, fn)</h3>
|
||||
<p>Remove a command.</p>
|
||||
<p><code>name</code>: Name of the command to be removed</p>
|
||||
<p><code>fn</code>: Method to be removed, if not provided all methods for the command will be
|
||||
removed</p>
|
||||
<h3>getCopyData()</h3>
|
||||
<p>Get a copy of the rendering tree data</p>
|
||||
<h3>clearHistory()</h3>
|
||||
<p>Clear the history stack data</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
294
web/src/pages/Doc/en/constructor/index.md
Normal file
294
web/src/pages/Doc/en/constructor/index.md
Normal file
@ -0,0 +1,294 @@
|
||||
# Constructor
|
||||
|
||||
## Basic use
|
||||
|
||||
```html
|
||||
<div id="mindMapContainer"></div>
|
||||
```
|
||||
|
||||
```js
|
||||
import MindMap from "simple-mind-map";
|
||||
|
||||
const mindMap = new MindMap({
|
||||
el: document.getElementById("mindMapContainer"),
|
||||
data: {
|
||||
"data": {
|
||||
"text": "根节点"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Xmind Parsing Method
|
||||
|
||||
> v0.2.7+
|
||||
|
||||
You can get the `Xmind` parsing method as follows:
|
||||
|
||||
```js
|
||||
import MindMap from "simple-mind-map";
|
||||
|
||||
console.log(MindMap.xmind);
|
||||
```
|
||||
|
||||
The `MindMap.xmind` object has two methods attached:
|
||||
|
||||
### parseXmindFile(file)
|
||||
|
||||
Parsing the `.xmind` file and returning the parsed data. Note that this is
|
||||
complete data, including the node tree, theme, and structure. You can use
|
||||
`mindMap.setFullData(data)` to render the returned data to the canvas.
|
||||
|
||||
`file`: `File` object
|
||||
|
||||
### transformXmind(content)
|
||||
|
||||
Convert `xmind` data. The `.xmind` file is essentially a `zip` file that can be
|
||||
decompressed by changing the suffix to zip. Inside, there is a `content.json`
|
||||
file. If you have parsed this file yourself, you can pass the contents of this
|
||||
file to this method for conversion. The converted data is the complete data,
|
||||
including the node tree, theme, structure, etc. You can use
|
||||
`mindMap.setFullData(data)` to render the returned data to the canvas.
|
||||
|
||||
`content`: the contents of the `content.json` file within the `.xmind` zip
|
||||
package
|
||||
|
||||
### transformOldXmind(content)
|
||||
|
||||
> v0.2.8+
|
||||
|
||||
For data parsing of the `xmind8` version, because the `.xmind` file in this
|
||||
version does not have a `content.json`, it corresponds to `content.xml`.
|
||||
|
||||
`content`: the contents of the `content.xml` file within the `.xmind` zip
|
||||
package
|
||||
|
||||
## Instantiation options
|
||||
|
||||
| Field Name | Type | Default Value | Description | Required |
|
||||
| -------------------------------- | ------- | ---------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- |
|
||||
| el | Element | | Container element, must be a DOM element | Yes |
|
||||
| data | Object | {} | Mind map data, refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js | |
|
||||
| layout | String | logicalStructure | Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram) | |
|
||||
| theme | String | default | Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4 (v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple | |
|
||||
| themeConfig | Object | {} | Theme configuration, will be merged with the selected theme, available fields refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js | |
|
||||
| scaleRatio | Number | 0.1 | The incremental scaling ratio | |
|
||||
| maxTag | Number | 5 | The maximum number of tags displayed in the node, any additional tags will be discarded | |
|
||||
| exportPadding | Number | 20 | The padding for exporting images | |
|
||||
| imgTextMargin | Number | 5 | The spacing between the image and text in the node | |
|
||||
| textContentMargin | Number | 2 | The spacing between various text information in the node, such as the spacing between the icon and text | |
|
||||
| selectTranslateStep | Number | 3 | The canvas offset when mouse moves to the edge during multi-select node | |
|
||||
| selectTranslateLimit | Number | 20 | The distance from the edge when the canvas begins to offset during multi-select node | |
|
||||
| customNoteContentShow（v0.1.6+） | Object | null | Custom node note content display, object type, structure: {show: (noteContent, left, top) => {// your display node note logic }, hide: () => {// your hide node note logic }} | |
|
||||
| readonly（v0.1.7+） | Boolean | false | Whether it is read-only mode | |
|
||||
|
||||
## Static methods
|
||||
|
||||
### defineTheme(name, config)
|
||||
|
||||
> v0.2.23+
|
||||
|
||||
Define new theme.
|
||||
|
||||
`name`：New theme name
|
||||
|
||||
`config`：New theme config
|
||||
|
||||
`Simple-mind-map ` Built-in many themes. In addition, you can register new theme. It is recommended to register before instantiation, so that you can directly use the newly registered theme during instantiation. Use example:
|
||||
|
||||
```js
|
||||
import MindMap from 'simple-mind-map'
|
||||
// 注册新主题
|
||||
MindMap.defineTheme('主题名称', {})
|
||||
|
||||
// 1.实例化时使用新注册的主题
|
||||
const mindMap = new MindMap({
|
||||
theme: '主题名称'
|
||||
})
|
||||
|
||||
// 2.动态切换新主题
|
||||
mindMap.setTheme('主题名称')
|
||||
```
|
||||
|
||||
For all configurations of theme, please refer to [Default Topic](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js). The `defineTheme`method will merge the configuration you passed in with the default configuration. Most of the themes do not need custom many parts. For a typical customized theme configuration, please refer to [blueSky](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js).
|
||||
|
||||
|
||||
|
||||
## Instance methods
|
||||
|
||||
### render()
|
||||
|
||||
Triggers a full rendering, which will reuse nodes for better performance. If
|
||||
only the node positions have changed, this method can be called to `reRender`.
|
||||
|
||||
### reRender()
|
||||
|
||||
Performs a full re-render, clearing the canvas and creating new nodes. This has
|
||||
poor performance and should be used sparingly.
|
||||
|
||||
### resize()
|
||||
|
||||
After the container size has changed, this method should be called to adjust.
|
||||
|
||||
### setMode(mode)
|
||||
|
||||
> v0.1.7+
|
||||
|
||||
Switches between readonly and edit mode.
|
||||
|
||||
`mode`：readonly、edit
|
||||
|
||||
### on(event, fn)
|
||||
|
||||
Listen to an event. Event list:
|
||||
|
||||
| Event Name | Description | Callback Parameters |
|
||||
| -------------------------------- | ------------------------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------- |
|
||||
| data_change | Tree rendering data change, listen to this method to get the latest data | data (current tree rendering data) |
|
||||
| view_data_change（v0.1.1+） | View change data, such as when dragging or zooming | data (current view state data) |
|
||||
| back_forward | Forward or backward | activeHistoryIndex (current index in the history data array), length (current length of the history data array) |
|
||||
| draw_click | Canvas click event | e (event object) |
|
||||
| svg_mousedown | svg canvas mouse down event | e (event object) |
|
||||
| mousedown | el element mouse down event | e (event object), this (Event event class instance) |
|
||||
| mousemove | el element mouse move event | e (event object), this (Event event class instance) |
|
||||
| drag | If it is a drag event while holding down the left button | e (event object), this (Event event class instance) |
|
||||
| mouseup | el element mouse up event | e (event object), this (Event event class instance) |
|
||||
| mousewheel | Mouse scroll event | e (event object), dir (up or down scroll), this (Event event class instance) |
|
||||
| contextmenu | svg canvas right mouse button menu event | e (event object) |
|
||||
| node_click | Node click event | this (node instance), e (event object) |
|
||||
| node_mousedown | Node mouse down event | this (node instance), e (event object) |
|
||||
| node_mouseup | node mouseup event | this (node instance), e (event object) |
|
||||
| node_mouseup | Node mouseup event | this (node instance), e (event object) |
|
||||
| node_dblclick | Node double-click event | this (node instance), e (event object) |
|
||||
| node_contextmenu | Node right-click menu event | e (event object), this (node instance) |
|
||||
| before_node_active | Event before node activation | this (node instance), activeNodeList (current list of active nodes) |
|
||||
| node_active | Node activation event | this (node instance), activeNodeList (current list of active nodes) |
|
||||
| expand_btn_click | Node expand or collapse event | this (node instance) |
|
||||
| before_show_text_edit | Event before node text edit box opens | |
|
||||
| hide_text_edit | Node text edit box close event | textEditNode (text edit box DOM node), activeNodeList (current list of active nodes) |
|
||||
| scale | Zoom event | scale (zoom ratio) |
|
||||
| node_img_dblclick（v0.2.15+） | Node image double-click event | this (node instance), e (event object) |
|
||||
| node_tree_render_end（v0.2.16+） | Node tree render end event | |
|
||||
|
||||
### emit(event, ...args)
|
||||
|
||||
Trigger an event, which can be one of the events listed above or a custom event.
|
||||
|
||||
### off(event, fn)
|
||||
|
||||
Unbind an event.
|
||||
|
||||
### setTheme(theme)
|
||||
|
||||
Switches the theme. Available themes can be found in the options table above.
|
||||
|
||||
### getTheme()
|
||||
|
||||
Gets the current theme.
|
||||
|
||||
### setThemeConfig(config)
|
||||
|
||||
Sets the theme configuration. `config` is the same as the `themeConfig` option
|
||||
in the options table above.
|
||||
|
||||
### getCustomThemeConfig()
|
||||
|
||||
Gets the custom theme configuration.
|
||||
|
||||
### getThemeConfig(prop)
|
||||
|
||||
Gets the value of a specific theme configuration property.
|
||||
|
||||
### getLayout()
|
||||
|
||||
Gets the current layout structure.
|
||||
|
||||
### setLayout(layout)
|
||||
|
||||
Sets the layout structure. Available values can be found in the `layout` field
|
||||
in the options table above.
|
||||
|
||||
### execCommand(name, ...args)
|
||||
|
||||
Executes a command, which will add a record to the history stack for undo or
|
||||
redo. All commands are as follows:
|
||||
|
||||
| Command name | Description | Parameters |
|
||||
| ---------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
||||
| SELECT_ALL | Select all | |
|
||||
| BACK | Go back a specified number of steps | step (the number of steps to go back, default is 1) |
|
||||
| FORWARD | Go forward a specified number of steps | step (the number of steps to go forward, default is 1) |
|
||||
| INSERT_NODE | Insert a sibling node, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective | |
|
||||
| INSERT_CHILD_NODE | Insert a child node, the active node will be the operation node | |
|
||||
| UP_NODE | Move node up, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the first node in the list will be invalid | |
|
||||
| DOWN_NODE | Move node down, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the last node in the list will be invalid | |
|
||||
| REMOVE_NODE | Remove node, the active node will be the operation node | |
|
||||
| PASTE_NODE | Paste node to a node, the active node will be the operation node | data (the node data to paste, usually obtained through the renderer.copyNode() and renderer.cutNode() methods) |
|
||||
| SET_NODE_STYLE | Modify node style | node (the node to set the style of), prop (style property), value (style property value), isActive (boolean, whether the style being set is for the active state) |
|
||||
| SET_NODE_ACTIVE | Set whether the node is active | node (the node to set), active (boolean, whether to activate) |
|
||||
| CLEAR_ACTIVE_NODE | Clear the active state of the currently active node(s), the active node will be the operation node | |
|
||||
| SET_NODE_EXPAND | Set whether the node is expanded | node (the node to set), expand (boolean, whether to expand) |
|
||||
| EXPAND_ALL | Expand all nodes | |
|
||||
| UNEXPAND_ALL | Collapse all nodes | |
|
||||
| UNEXPAND_TO_LEVEL (v0.2.8+) | Expand to a specified level | level (the level to expand to, 1, 2, 3...) |
|
||||
| SET_NODE_DATA | Update node data, that is, update the data in the data object of the node data object | node (the node to set), data (object, the data to update, e.g. `{expand: true}`) |
|
||||
| SET_NODE_TEXT | Set node text | node (the node to set), text (the new text for the node) |
|
||||
| SET_NODE_IMAGE | Set Node Image | node (node to set), imgData (object, image information, structured as: `{url, title, width, height}`, the width and height of the image must be passed) |
|
||||
| SET_NODE_ICON | Set Node Icon | node (node to set), icons (array, predefined image names array, available icons can be obtained in the nodeIconList list in the [https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js) file, icon name is type_name, such as ['priority_1']) |
|
||||
| SET_NODE_HYPERLINK | Set Node Hyperlink | node (node to set), link (hyperlink address), title (hyperlink name, optional) |
|
||||
| SET_NODE_NOTE | Set Node Note | node (node to set), note (note text) |
|
||||
| SET_NODE_TAG | Set Node Tag | node (node to set), tag (string array, built-in color information can be obtained in [https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js)) |
|
||||
| INSERT_AFTER (v0.1.5+) | Move Node to After Another Node | node (node to move), exist (target node) |
|
||||
| INSERT_BEFORE (v0.1.5+) | Move Node to Before Another Node | node (node to move), exist (target node) |
|
||||
| MOVE_NODE_TO (v0.1.5+) | Move a node as a child of another node | node (the node to move), toNode (the target node) |
|
||||
| ADD_GENERALIZATION (v0.2.0+) | Add a node summary | data (the data for the summary, in object format, all numerical fields of the node are supported, default is `{text: 'summary'}`) |
|
||||
| REMOVE_GENERALIZATION (v0.2.0+) | Remove a node summary | |
|
||||
| SET_NODE_CUSTOM_POSITION (v0.2.0+) | Set a custom position for a node | node (the node to set), left (custom x coordinate, default is undefined), top (custom y coordinate, default is undefined) |
|
||||
| RESET_LAYOUT (v0.2.0+) | Arrange layout with one click | |
|
||||
| SET_NODE_SHAPE (v0.2.4+) | Set the shape of a node | node (the node to set), shape (the shape, all shapes: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/Shape.js) |
|
||||
|
||||
### setData(data)
|
||||
|
||||
Dynamic setting of mind map data, pure node data
|
||||
|
||||
`data`: mind map structure data
|
||||
|
||||
### setFullData(_data_)
|
||||
|
||||
> v0.2.7+
|
||||
|
||||
Dynamic setting of mind map data, including node data, layout, theme, view
|
||||
|
||||
`data`: complete data, structure can refer to
|
||||
[exportFullData](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exportFullData.json)
|
||||
|
||||
### getData(withConfig)
|
||||
|
||||
> v0.2.9+
|
||||
|
||||
Gets mind map data
|
||||
|
||||
`withConfig`: `Boolean`, default is `false`, that is, the obtained data only
|
||||
includes the node tree, if `true` is passed, it will also include theme, layout,
|
||||
view, etc. data
|
||||
|
||||
### export(type, isDownload, fileName)
|
||||
|
||||
Export
|
||||
|
||||
`type`: the type to be exported, optional values: png, svg, json, pdf (v0.2.1+),
|
||||
smm (essentially also json)
|
||||
|
||||
`isDownload`: whether to directly trigger download, Boolean value, default is
|
||||
`false`
|
||||
|
||||
`fileName`: (v0.1.6+) the name of the exported file, default is `思维导图` (mind
|
||||
map).
|
||||
|
||||
### toPos(x, y)
|
||||
|
||||
> v0.1.5+
|
||||
|
||||
Convert the coordinates of the browser's visible window to coordinates relative
|
||||
to the canvas.
|
||||
571
web/src/pages/Doc/en/constructor/index.vue
Normal file
571
web/src/pages/Doc/en/constructor/index.vue
Normal file
@ -0,0 +1,571 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Constructor</h1>
|
||||
<h2>Basic use</h2>
|
||||
<pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"mindMapContainer"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">"simple-mind-map"</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
|
||||
<span class="hljs-attr">el</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">"mindMapContainer"</span>),
|
||||
<span class="hljs-attr">data</span>: {
|
||||
<span class="hljs-string">"data"</span>: {
|
||||
<span class="hljs-string">"text"</span>: <span class="hljs-string">"根节点"</span>
|
||||
},
|
||||
<span class="hljs-string">"children"</span>: []
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<h2>Xmind Parsing Method</h2>
|
||||
<blockquote>
|
||||
<p>v0.2.7+</p>
|
||||
</blockquote>
|
||||
<p>You can get the <code>Xmind</code> parsing method as follows:</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">"simple-mind-map"</span>;
|
||||
|
||||
<span class="hljs-built_in">console</span>.log(MindMap.xmind);
|
||||
</code></pre>
|
||||
<p>The <code>MindMap.xmind</code> object has two methods attached:</p>
|
||||
<h3>parseXmindFile(file)</h3>
|
||||
<p>Parsing the <code>.xmind</code> file and returning the parsed data. Note that this is
|
||||
complete data, including the node tree, theme, and structure. You can use
|
||||
<code>mindMap.setFullData(data)</code> to render the returned data to the canvas.</p>
|
||||
<p><code>file</code>: <code>File</code> object</p>
|
||||
<h3>transformXmind(content)</h3>
|
||||
<p>Convert <code>xmind</code> data. The <code>.xmind</code> file is essentially a <code>zip</code> file that can be
|
||||
decompressed by changing the suffix to zip. Inside, there is a <code>content.json</code>
|
||||
file. If you have parsed this file yourself, you can pass the contents of this
|
||||
file to this method for conversion. The converted data is the complete data,
|
||||
including the node tree, theme, structure, etc. You can use
|
||||
<code>mindMap.setFullData(data)</code> to render the returned data to the canvas.</p>
|
||||
<p><code>content</code>: the contents of the <code>content.json</code> file within the <code>.xmind</code> zip
|
||||
package</p>
|
||||
<h3>transformOldXmind(content)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.8+</p>
|
||||
</blockquote>
|
||||
<p>For data parsing of the <code>xmind8</code> version, because the <code>.xmind</code> file in this
|
||||
version does not have a <code>content.json</code>, it corresponds to <code>content.xml</code>.</p>
|
||||
<p><code>content</code>: the contents of the <code>content.xml</code> file within the <code>.xmind</code> zip
|
||||
package</p>
|
||||
<h2>Instantiation options</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Field Name</th>
|
||||
<th>Type</th>
|
||||
<th>Default Value</th>
|
||||
<th>Description</th>
|
||||
<th>Required</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>el</td>
|
||||
<td>Element</td>
|
||||
<td></td>
|
||||
<td>Container element, must be a DOM element</td>
|
||||
<td>Yes</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data</td>
|
||||
<td>Object</td>
|
||||
<td>{}</td>
|
||||
<td>Mind map data, refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>layout</td>
|
||||
<td>String</td>
|
||||
<td>logicalStructure</td>
|
||||
<td>Layout type, options: logicalStructure (logical structure diagram), mindMap (mind map), catalogOrganization (catalog organization diagram), organizationStructure (organization structure diagram)</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>theme</td>
|
||||
<td>String</td>
|
||||
<td>default</td>
|
||||
<td>Theme, options: default, classic, minions, pinkGrape, mint, gold, vitalityOrange, greenLeaf, dark2, skyGreen, classic2, classic3, classic4 (v0.2.0+), classicGreen, classicBlue, blueSky, brainImpairedPink, dark, earthYellow, freshGreen, freshRed, romanticPurple</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>themeConfig</td>
|
||||
<td>Object</td>
|
||||
<td>{}</td>
|
||||
<td>Theme configuration, will be merged with the selected theme, available fields refer to: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>scaleRatio</td>
|
||||
<td>Number</td>
|
||||
<td>0.1</td>
|
||||
<td>The incremental scaling ratio</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>maxTag</td>
|
||||
<td>Number</td>
|
||||
<td>5</td>
|
||||
<td>The maximum number of tags displayed in the node, any additional tags will be discarded</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>exportPadding</td>
|
||||
<td>Number</td>
|
||||
<td>20</td>
|
||||
<td>The padding for exporting images</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>imgTextMargin</td>
|
||||
<td>Number</td>
|
||||
<td>5</td>
|
||||
<td>The spacing between the image and text in the node</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>textContentMargin</td>
|
||||
<td>Number</td>
|
||||
<td>2</td>
|
||||
<td>The spacing between various text information in the node, such as the spacing between the icon and text</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>selectTranslateStep</td>
|
||||
<td>Number</td>
|
||||
<td>3</td>
|
||||
<td>The canvas offset when mouse moves to the edge during multi-select node</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>selectTranslateLimit</td>
|
||||
<td>Number</td>
|
||||
<td>20</td>
|
||||
<td>The distance from the edge when the canvas begins to offset during multi-select node</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>customNoteContentShow（v0.1.6+）</td>
|
||||
<td>Object</td>
|
||||
<td>null</td>
|
||||
<td>Custom node note content display, object type, structure: {show: (noteContent, left, top) => {// your display node note logic }, hide: () => {// your hide node note logic }}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>readonly（v0.1.7+）</td>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
<td>Whether it is read-only mode</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>Static methods</h2>
|
||||
<h3>defineTheme(name, config)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.23+</p>
|
||||
</blockquote>
|
||||
<p>Define new theme.</p>
|
||||
<p><code>name</code>：New theme name</p>
|
||||
<p><code>config</code>：New theme config</p>
|
||||
<p><code>Simple-mind-map </code> Built-in many themes. In addition, you can register new theme. It is recommended to register before instantiation, so that you can directly use the newly registered theme during instantiation. Use example:</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map'</span>
|
||||
<span class="hljs-comment">// 注册新主题</span>
|
||||
MindMap.defineTheme(<span class="hljs-string">'主题名称'</span>, {})
|
||||
|
||||
<span class="hljs-comment">// 1.实例化时使用新注册的主题</span>
|
||||
<span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
|
||||
<span class="hljs-attr">theme</span>: <span class="hljs-string">'主题名称'</span>
|
||||
})
|
||||
|
||||
<span class="hljs-comment">// 2.动态切换新主题</span>
|
||||
mindMap.setTheme(<span class="hljs-string">'主题名称'</span>)
|
||||
</code></pre>
|
||||
<p>For all configurations of theme, please refer to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">Default Topic</a>. The <code>defineTheme</code>method will merge the configuration you passed in with the default configuration. Most of the themes do not need custom many parts. For a typical customized theme configuration, please refer to <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js">blueSky</a>.</p>
|
||||
<h2>Instance methods</h2>
|
||||
<h3>render()</h3>
|
||||
<p>Triggers a full rendering, which will reuse nodes for better performance. If
|
||||
only the node positions have changed, this method can be called to <code>reRender</code>.</p>
|
||||
<h3>reRender()</h3>
|
||||
<p>Performs a full re-render, clearing the canvas and creating new nodes. This has
|
||||
poor performance and should be used sparingly.</p>
|
||||
<h3>resize()</h3>
|
||||
<p>After the container size has changed, this method should be called to adjust.</p>
|
||||
<h3>setMode(mode)</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.7+</p>
|
||||
</blockquote>
|
||||
<p>Switches between readonly and edit mode.</p>
|
||||
<p><code>mode</code>：readonly、edit</p>
|
||||
<h3>on(event, fn)</h3>
|
||||
<p>Listen to an event. Event list:</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Event Name</th>
|
||||
<th>Description</th>
|
||||
<th>Callback Parameters</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>data_change</td>
|
||||
<td>Tree rendering data change, listen to this method to get the latest data</td>
|
||||
<td>data (current tree rendering data)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>view_data_change（v0.1.1+）</td>
|
||||
<td>View change data, such as when dragging or zooming</td>
|
||||
<td>data (current view state data)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>back_forward</td>
|
||||
<td>Forward or backward</td>
|
||||
<td>activeHistoryIndex (current index in the history data array), length (current length of the history data array)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>draw_click</td>
|
||||
<td>Canvas click event</td>
|
||||
<td>e (event object)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>svg_mousedown</td>
|
||||
<td>svg canvas mouse down event</td>
|
||||
<td>e (event object)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mousedown</td>
|
||||
<td>el element mouse down event</td>
|
||||
<td>e (event object), this (Event event class instance)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mousemove</td>
|
||||
<td>el element mouse move event</td>
|
||||
<td>e (event object), this (Event event class instance)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>drag</td>
|
||||
<td>If it is a drag event while holding down the left button</td>
|
||||
<td>e (event object), this (Event event class instance)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mouseup</td>
|
||||
<td>el element mouse up event</td>
|
||||
<td>e (event object), this (Event event class instance)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mousewheel</td>
|
||||
<td>Mouse scroll event</td>
|
||||
<td>e (event object), dir (up or down scroll), this (Event event class instance)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>contextmenu</td>
|
||||
<td>svg canvas right mouse button menu event</td>
|
||||
<td>e (event object)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_click</td>
|
||||
<td>Node click event</td>
|
||||
<td>this (node instance), e (event object)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_mousedown</td>
|
||||
<td>Node mouse down event</td>
|
||||
<td>this (node instance), e (event object)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_mouseup</td>
|
||||
<td>node mouseup event</td>
|
||||
<td>this (node instance), e (event object)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_mouseup</td>
|
||||
<td>Node mouseup event</td>
|
||||
<td>this (node instance), e (event object)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_dblclick</td>
|
||||
<td>Node double-click event</td>
|
||||
<td>this (node instance), e (event object)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_contextmenu</td>
|
||||
<td>Node right-click menu event</td>
|
||||
<td>e (event object), this (node instance)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>before_node_active</td>
|
||||
<td>Event before node activation</td>
|
||||
<td>this (node instance), activeNodeList (current list of active nodes)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_active</td>
|
||||
<td>Node activation event</td>
|
||||
<td>this (node instance), activeNodeList (current list of active nodes)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>expand_btn_click</td>
|
||||
<td>Node expand or collapse event</td>
|
||||
<td>this (node instance)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>before_show_text_edit</td>
|
||||
<td>Event before node text edit box opens</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide_text_edit</td>
|
||||
<td>Node text edit box close event</td>
|
||||
<td>textEditNode (text edit box DOM node), activeNodeList (current list of active nodes)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>scale</td>
|
||||
<td>Zoom event</td>
|
||||
<td>scale (zoom ratio)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_img_dblclick（v0.2.15+）</td>
|
||||
<td>Node image double-click event</td>
|
||||
<td>this (node instance), e (event object)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_tree_render_end（v0.2.16+）</td>
|
||||
<td>Node tree render end event</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>emit(event, ...args)</h3>
|
||||
<p>Trigger an event, which can be one of the events listed above or a custom event.</p>
|
||||
<h3>off(event, fn)</h3>
|
||||
<p>Unbind an event.</p>
|
||||
<h3>setTheme(theme)</h3>
|
||||
<p>Switches the theme. Available themes can be found in the options table above.</p>
|
||||
<h3>getTheme()</h3>
|
||||
<p>Gets the current theme.</p>
|
||||
<h3>setThemeConfig(config)</h3>
|
||||
<p>Sets the theme configuration. <code>config</code> is the same as the <code>themeConfig</code> option
|
||||
in the options table above.</p>
|
||||
<h3>getCustomThemeConfig()</h3>
|
||||
<p>Gets the custom theme configuration.</p>
|
||||
<h3>getThemeConfig(prop)</h3>
|
||||
<p>Gets the value of a specific theme configuration property.</p>
|
||||
<h3>getLayout()</h3>
|
||||
<p>Gets the current layout structure.</p>
|
||||
<h3>setLayout(layout)</h3>
|
||||
<p>Sets the layout structure. Available values can be found in the <code>layout</code> field
|
||||
in the options table above.</p>
|
||||
<h3>execCommand(name, ...args)</h3>
|
||||
<p>Executes a command, which will add a record to the history stack for undo or
|
||||
redo. All commands are as follows:</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Command name</th>
|
||||
<th>Description</th>
|
||||
<th>Parameters</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>SELECT_ALL</td>
|
||||
<td>Select all</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>BACK</td>
|
||||
<td>Go back a specified number of steps</td>
|
||||
<td>step (the number of steps to go back, default is 1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>FORWARD</td>
|
||||
<td>Go forward a specified number of steps</td>
|
||||
<td>step (the number of steps to go forward, default is 1)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>INSERT_NODE</td>
|
||||
<td>Insert a sibling node, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>INSERT_CHILD_NODE</td>
|
||||
<td>Insert a child node, the active node will be the operation node</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>UP_NODE</td>
|
||||
<td>Move node up, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the first node in the list will be invalid</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DOWN_NODE</td>
|
||||
<td>Move node down, the active node will be the operation node. If there are multiple active nodes, only the first one will be effective. Using this command on the root node or the last node in the list will be invalid</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>REMOVE_NODE</td>
|
||||
<td>Remove node, the active node will be the operation node</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PASTE_NODE</td>
|
||||
<td>Paste node to a node, the active node will be the operation node</td>
|
||||
<td>data (the node data to paste, usually obtained through the renderer.copyNode() and renderer.cutNode() methods)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_STYLE</td>
|
||||
<td>Modify node style</td>
|
||||
<td>node (the node to set the style of), prop (style property), value (style property value), isActive (boolean, whether the style being set is for the active state)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_ACTIVE</td>
|
||||
<td>Set whether the node is active</td>
|
||||
<td>node (the node to set), active (boolean, whether to activate)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CLEAR_ACTIVE_NODE</td>
|
||||
<td>Clear the active state of the currently active node(s), the active node will be the operation node</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_EXPAND</td>
|
||||
<td>Set whether the node is expanded</td>
|
||||
<td>node (the node to set), expand (boolean, whether to expand)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>EXPAND_ALL</td>
|
||||
<td>Expand all nodes</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>UNEXPAND_ALL</td>
|
||||
<td>Collapse all nodes</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>UNEXPAND_TO_LEVEL (v0.2.8+)</td>
|
||||
<td>Expand to a specified level</td>
|
||||
<td>level (the level to expand to, 1, 2, 3...)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_DATA</td>
|
||||
<td>Update node data, that is, update the data in the data object of the node data object</td>
|
||||
<td>node (the node to set), data (object, the data to update, e.g. <code>{expand: true}</code>)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_TEXT</td>
|
||||
<td>Set node text</td>
|
||||
<td>node (the node to set), text (the new text for the node)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_IMAGE</td>
|
||||
<td>Set Node Image</td>
|
||||
<td>node (node to set), imgData (object, image information, structured as: <code>{url, title, width, height}</code>, the width and height of the image must be passed)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_ICON</td>
|
||||
<td>Set Node Icon</td>
|
||||
<td>node (node to set), icons (array, predefined image names array, available icons can be obtained in the nodeIconList list in the <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js">https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js</a> file, icon name is type_name, such as ['priority_1'])</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_HYPERLINK</td>
|
||||
<td>Set Node Hyperlink</td>
|
||||
<td>node (node to set), link (hyperlink address), title (hyperlink name, optional)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_NOTE</td>
|
||||
<td>Set Node Note</td>
|
||||
<td>node (node to set), note (note text)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_TAG</td>
|
||||
<td>Set Node Tag</td>
|
||||
<td>node (node to set), tag (string array, built-in color information can be obtained in <a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js">https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js</a>)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>INSERT_AFTER (v0.1.5+)</td>
|
||||
<td>Move Node to After Another Node</td>
|
||||
<td>node (node to move), exist (target node)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>INSERT_BEFORE (v0.1.5+)</td>
|
||||
<td>Move Node to Before Another Node</td>
|
||||
<td>node (node to move), exist (target node)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>MOVE_NODE_TO (v0.1.5+)</td>
|
||||
<td>Move a node as a child of another node</td>
|
||||
<td>node (the node to move), toNode (the target node)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ADD_GENERALIZATION (v0.2.0+)</td>
|
||||
<td>Add a node summary</td>
|
||||
<td>data (the data for the summary, in object format, all numerical fields of the node are supported, default is <code>{text: 'summary'}</code>)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>REMOVE_GENERALIZATION (v0.2.0+)</td>
|
||||
<td>Remove a node summary</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_CUSTOM_POSITION (v0.2.0+)</td>
|
||||
<td>Set a custom position for a node</td>
|
||||
<td>node (the node to set), left (custom x coordinate, default is undefined), top (custom y coordinate, default is undefined)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>RESET_LAYOUT (v0.2.0+)</td>
|
||||
<td>Arrange layout with one click</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_SHAPE (v0.2.4+)</td>
|
||||
<td>Set the shape of a node</td>
|
||||
<td>node (the node to set), shape (the shape, all shapes: https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/Shape.js)</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>setData(data)</h3>
|
||||
<p>Dynamic setting of mind map data, pure node data</p>
|
||||
<p><code>data</code>: mind map structure data</p>
|
||||
<h3>setFullData(<em>data</em>)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.7+</p>
|
||||
</blockquote>
|
||||
<p>Dynamic setting of mind map data, including node data, layout, theme, view</p>
|
||||
<p><code>data</code>: complete data, structure can refer to
|
||||
<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exportFullData.json">exportFullData</a></p>
|
||||
<h3>getData(withConfig)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.9+</p>
|
||||
</blockquote>
|
||||
<p>Gets mind map data</p>
|
||||
<p><code>withConfig</code>: <code>Boolean</code>, default is <code>false</code>, that is, the obtained data only
|
||||
includes the node tree, if <code>true</code> is passed, it will also include theme, layout,
|
||||
view, etc. data</p>
|
||||
<h3>export(type, isDownload, fileName)</h3>
|
||||
<p>Export</p>
|
||||
<p><code>type</code>: the type to be exported, optional values: png, svg, json, pdf (v0.2.1+),
|
||||
smm (essentially also json)</p>
|
||||
<p><code>isDownload</code>: whether to directly trigger download, Boolean value, default is
|
||||
<code>false</code></p>
|
||||
<p><code>fileName</code>: (v0.1.6+) the name of the exported file, default is <code>思维导图</code> (mind
|
||||
map).</p>
|
||||
<h3>toPos(x, y)</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
</blockquote>
|
||||
<p>Convert the coordinates of the browser's visible window to coordinates relative
|
||||
to the canvas.</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
43
web/src/pages/Doc/en/doExport/index.md
Normal file
43
web/src/pages/Doc/en/doExport/index.md
Normal file
@ -0,0 +1,43 @@
|
||||
# DoExport instance
|
||||
|
||||
The `doExport` instance is responsible for exporting and can be obtained through
|
||||
`mindMap.doExport`.
|
||||
|
||||
## Methods
|
||||
|
||||
### png()
|
||||
|
||||
Exports as `png`, an async method that returns image data, `data:url` data which
|
||||
can be downloaded or displayed.
|
||||
|
||||
### 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
|
||||
}
|
||||
```
|
||||
|
||||
### pdf(name)
|
||||
|
||||
> v0.2.1+
|
||||
|
||||
`name`：File name
|
||||
|
||||
Export as `pdf`
|
||||
|
||||
### json(name, withConfig)
|
||||
|
||||
`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
|
||||
42
web/src/pages/Doc/en/doExport/index.vue
Normal file
42
web/src/pages/Doc/en/doExport/index.vue
Normal file
@ -0,0 +1,42 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>DoExport instance</h1>
|
||||
<p>The <code>doExport</code> instance is responsible for exporting and can be obtained through
|
||||
<code>mindMap.doExport</code>.</p>
|
||||
<h2>Methods</h2>
|
||||
<h3>png()</h3>
|
||||
<p>Exports as <code>png</code>, an async method that returns image data, <code>data:url</code> data which
|
||||
can be downloaded or displayed.</p>
|
||||
<h3>svg()</h3>
|
||||
<p>Exports as <code>svg</code>, an async method that returns <code>svg</code> data, <code>data:url</code> data which
|
||||
can be downloaded or displayed.</p>
|
||||
<h3>getSvgData()</h3>
|
||||
<p>Gets <code>svg</code> data, an async method that returns an object:</p>
|
||||
<pre class="hljs"><code>{
|
||||
node; <span class="hljs-comment">// svg object</span>
|
||||
str; <span class="hljs-comment">// svg string</span>
|
||||
}
|
||||
</code></pre>
|
||||
<h3>pdf(name)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.1+</p>
|
||||
</blockquote>
|
||||
<p><code>name</code>：File name</p>
|
||||
<p>Export as <code>pdf</code></p>
|
||||
<h3>json(name, withConfig)</h3>
|
||||
<p><code>name</code>：It is temporarily useless, just pass an empty string</p>
|
||||
<p><code>withConfig``：Boolean</code>, default <code>true</code>, Whether the data contains configuration, otherwise it is pure mind map node data</p>
|
||||
<p>Return <code>json</code> data, <code>data:url</code> type, you can download it yourself</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
80
web/src/pages/Doc/en/introduction/index.md
Normal file
80
web/src/pages/Doc/en/introduction/index.md
Normal file
@ -0,0 +1,80 @@
|
||||
# Introduction
|
||||
|
||||
`simple-mind-map` is a simple and powerful web mind map library, not dependent on any specific framework.
|
||||
|
||||
## Features
|
||||
|
||||
- [x] Supports four types of structures: logical structure diagrams, mind maps,
|
||||
organizational structure diagrams, and directory organization diagrams
|
||||
- [x] Built-in multiple themes and allows for highly customized styles, and support register new themes
|
||||
- [x] Supports shortcuts
|
||||
- [x] Node content supports images, icons, hyperlinks, notes, tags, and
|
||||
summaries
|
||||
- [x] Supports forward and backward navigation
|
||||
- [x] Supports dragging and scaling
|
||||
- [x] Supports right-click and Ctrl + left-click to select multiple items
|
||||
- [x] Supports free dragging and dragging to adjust nodes
|
||||
- [x] Supports various node shapes
|
||||
- [x] Supports export to json, png, svg, pdf, and import from json, xmind
|
||||
- [x] Supports mini map
|
||||
|
||||
## Table of Contents
|
||||
|
||||
1.`simple-mind-map`
|
||||
|
||||
This is a mind map tool library that is framework-agnostic and can be used with
|
||||
frameworks such as Vue and React, or without a framework.
|
||||
|
||||
2.`web`
|
||||
|
||||
This is an online mind map built using the `simple-mind-map` library and based
|
||||
on `Vue2.x` and `ElementUI`. Features include:
|
||||
|
||||
- [x] Toolbar, which supports inserting and deleting nodes, and editing node
|
||||
images, icons, hyperlinks, notes, tags, and summaries
|
||||
|
||||
- [x] Sidebar, with panels for basic style settings, node style settings,
|
||||
outline, theme selection, and structure selection
|
||||
|
||||
- [x] Import and export functionality; data is saved in the browser's local
|
||||
storage by default, but it also supports creating, opening, and editing
|
||||
local files on the computer directly
|
||||
|
||||
- [x] Right-click menu, which supports operations such as expanding, collapsing,
|
||||
and organizing layout
|
||||
|
||||
- [x] Bottom bar, which supports node and word count statistics, switching
|
||||
between edit and read-only modes, zooming in and out, and switching to
|
||||
full screen, support mini map
|
||||
|
||||
3.`dist`
|
||||
|
||||
The folder containing the packaged resources for the `web` folder.
|
||||
|
||||
4.`docs`
|
||||
|
||||
Documentation, etc.
|
||||
|
||||
## Related Articles
|
||||
|
||||
[Technical Analysis of Web Mind Map Implementation (chi)](https://juejin.cn/post/6987711560521089061)
|
||||
|
||||
[Only a hundred lines of code are needed to add local file operation capability to your Web page. Are you sure not to try?](https://juejin.cn/post/7157681502506090510)
|
||||
|
||||
## Special Note
|
||||
|
||||
This project is rough and has not been thoroughly tested, its features are not
|
||||
yet fully developed, and there are some performance issues. It is only for
|
||||
learning and reference purposes and should not be used in actual projects.
|
||||
|
||||
The built-in themes and icons in the project come from:
|
||||
|
||||
[Baidu Mind Map](https://naotu.baidu.com/)
|
||||
|
||||
[Zhixi Mind Map](https://www.zhixi.com/)
|
||||
|
||||
Respect the copyright, and do not use the theme and icons directly for commercial projects.
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
81
web/src/pages/Doc/en/introduction/index.vue
Normal file
81
web/src/pages/Doc/en/introduction/index.vue
Normal file
@ -0,0 +1,81 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Introduction</h1>
|
||||
<p><code>simple-mind-map</code> is a simple and powerful web mind map library, not dependent on any specific framework.</p>
|
||||
<h2>Features</h2>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox16" checked="true"><label for="checkbox16">Supports four types of structures: logical structure diagrams, mind maps,</label>
|
||||
organizational structure diagrams, and directory organization diagrams</li>
|
||||
<li><input type="checkbox" id="checkbox17" checked="true"><label for="checkbox17">Built-in multiple themes and allows for highly customized styles, and support register new themes</label></li>
|
||||
<li><input type="checkbox" id="checkbox18" checked="true"><label for="checkbox18">Supports shortcuts</label></li>
|
||||
<li><input type="checkbox" id="checkbox19" checked="true"><label for="checkbox19">Node content supports images, icons, hyperlinks, notes, tags, and</label>
|
||||
summaries</li>
|
||||
<li><input type="checkbox" id="checkbox20" checked="true"><label for="checkbox20">Supports forward and backward navigation</label></li>
|
||||
<li><input type="checkbox" id="checkbox21" checked="true"><label for="checkbox21">Supports dragging and scaling</label></li>
|
||||
<li><input type="checkbox" id="checkbox22" checked="true"><label for="checkbox22">Supports right-click and Ctrl + left-click to select multiple items</label></li>
|
||||
<li><input type="checkbox" id="checkbox23" checked="true"><label for="checkbox23">Supports free dragging and dragging to adjust nodes</label></li>
|
||||
<li><input type="checkbox" id="checkbox24" checked="true"><label for="checkbox24">Supports various node shapes</label></li>
|
||||
<li><input type="checkbox" id="checkbox25" checked="true"><label for="checkbox25">Supports export to json, png, svg, pdf, and import from json, xmind</label></li>
|
||||
<li><input type="checkbox" id="checkbox26" checked="true"><label for="checkbox26">Supports mini map</label></li>
|
||||
</ul>
|
||||
<h2>Table of Contents</h2>
|
||||
<p>1.<code>simple-mind-map</code></p>
|
||||
<p>This is a mind map tool library that is framework-agnostic and can be used with
|
||||
frameworks such as Vue and React, or without a framework.</p>
|
||||
<p>2.<code>web</code></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>
|
||||
<p><input type="checkbox" id="checkbox27" checked="true"><label for="checkbox27">Toolbar, which supports inserting and deleting nodes, and editing node</label>
|
||||
images, icons, hyperlinks, notes, tags, and summaries</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><input type="checkbox" id="checkbox28" checked="true"><label for="checkbox28">Sidebar, with panels for basic style settings, node style settings,</label>
|
||||
outline, theme selection, and structure selection</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><input type="checkbox" id="checkbox29" checked="true"><label for="checkbox29">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</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><input type="checkbox" id="checkbox30" checked="true"><label for="checkbox30">Right-click menu, which supports operations such as expanding, collapsing,</label>
|
||||
and organizing layout</p>
|
||||
</li>
|
||||
<li>
|
||||
<p><input type="checkbox" id="checkbox31" checked="true"><label for="checkbox31">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</p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>3.<code>dist</code></p>
|
||||
<p>The folder containing the packaged resources for the <code>web</code> folder.</p>
|
||||
<p>4.<code>docs</code></p>
|
||||
<p>Documentation, etc.</p>
|
||||
<h2>Related Articles</h2>
|
||||
<p><a href="https://juejin.cn/post/6987711560521089061">Technical Analysis of Web Mind Map Implementation (chi)</a></p>
|
||||
<p><a href="https://juejin.cn/post/7157681502506090510">Only a hundred lines of code are needed to add local file operation capability to your Web page. Are you sure not to try?</a></p>
|
||||
<h2>Special Note</h2>
|
||||
<p>This project is rough and has not been thoroughly tested, its features are not
|
||||
yet fully developed, and there are some performance issues. It is only for
|
||||
learning and reference purposes and should not be used in actual projects.</p>
|
||||
<p>The built-in themes and icons in the project come from:</p>
|
||||
<p><a href="https://naotu.baidu.com/">Baidu Mind Map</a></p>
|
||||
<p><a href="https://www.zhixi.com/">Zhixi Mind Map</a></p>
|
||||
<p>Respect the copyright, and do not use the theme and icons directly for commercial projects.</p>
|
||||
<h2>License</h2>
|
||||
<p><a href="https://opensource.org/licenses/MIT">MIT</a></p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
61
web/src/pages/Doc/en/keyCommand/index.md
Normal file
61
web/src/pages/Doc/en/keyCommand/index.md
Normal file
@ -0,0 +1,61 @@
|
||||
# KeyCommand instance
|
||||
|
||||
The `keyCommand` instance is responsible for adding and triggering shortcuts. It
|
||||
includes some built-in shortcuts and can also be added manually. The
|
||||
`mindMap.keyCommand` instance can be obtained through this.
|
||||
|
||||
## Methods
|
||||
|
||||
### addShortcut(key, fn)
|
||||
|
||||
Add a shortcut
|
||||
|
||||
`key`: Shortcut key, key values can be viewed at
|
||||
[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/keyMap.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/keyMap.js)
|
||||
Example:
|
||||
|
||||
```js
|
||||
// Single key
|
||||
mindMap.keyCommand.addShortcut("Enter", () => {});
|
||||
// Or
|
||||
mindMap.keyCommand.addShortcut("Del|Backspace", () => {});
|
||||
// Combination key
|
||||
mindMap.keyCommand.addShortcut("Control+Enter", () => {});
|
||||
```
|
||||
|
||||
`fn`: Method to be executed
|
||||
|
||||
### removeShortcut(key, fn)
|
||||
|
||||
Remove a shortcut command, if `fn` is not specified, all callback methods for
|
||||
the shortcut will be removed
|
||||
|
||||
### getShortcutFn(key)
|
||||
|
||||
> v0.2.2+
|
||||
|
||||
Get the processing function for the specified shortcut
|
||||
|
||||
### pause()
|
||||
|
||||
> v0.2.2+
|
||||
|
||||
Pause all shortcut responses
|
||||
|
||||
### recovery()
|
||||
|
||||
> v0.2.2+
|
||||
|
||||
Restore shortcut responses
|
||||
|
||||
### save()
|
||||
|
||||
> v0.2.3+
|
||||
|
||||
Save the current registered shortcut data, then clear the shortcut data
|
||||
|
||||
### restore()
|
||||
|
||||
> v0.2.3+
|
||||
|
||||
Restore saved shortcut data, then clear the cache data
|
||||
61
web/src/pages/Doc/en/keyCommand/index.vue
Normal file
61
web/src/pages/Doc/en/keyCommand/index.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>KeyCommand instance</h1>
|
||||
<p>The <code>keyCommand</code> instance is responsible for adding and triggering shortcuts. It
|
||||
includes some built-in shortcuts and can also be added manually. The
|
||||
<code>mindMap.keyCommand</code> instance can be obtained through this.</p>
|
||||
<h2>Methods</h2>
|
||||
<h3>addShortcut(key, fn)</h3>
|
||||
<p>Add a shortcut</p>
|
||||
<p><code>key</code>: Shortcut key, key values can be viewed at
|
||||
<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/keyMap.js">https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/keyMap.js</a>
|
||||
Example:</p>
|
||||
<pre class="hljs"><code><span class="hljs-comment">// Single key</span>
|
||||
mindMap.keyCommand.addShortcut(<span class="hljs-string">"Enter"</span>, <span class="hljs-function">() =></span> {});
|
||||
<span class="hljs-comment">// Or</span>
|
||||
mindMap.keyCommand.addShortcut(<span class="hljs-string">"Del|Backspace"</span>, <span class="hljs-function">() =></span> {});
|
||||
<span class="hljs-comment">// Combination key</span>
|
||||
mindMap.keyCommand.addShortcut(<span class="hljs-string">"Control+Enter"</span>, <span class="hljs-function">() =></span> {});
|
||||
</code></pre>
|
||||
<p><code>fn</code>: Method to be executed</p>
|
||||
<h3>removeShortcut(key, fn)</h3>
|
||||
<p>Remove a shortcut command, if <code>fn</code> is not specified, all callback methods for
|
||||
the shortcut will be removed</p>
|
||||
<h3>getShortcutFn(key)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.2+</p>
|
||||
</blockquote>
|
||||
<p>Get the processing function for the specified shortcut</p>
|
||||
<h3>pause()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.2+</p>
|
||||
</blockquote>
|
||||
<p>Pause all shortcut responses</p>
|
||||
<h3>recovery()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.2+</p>
|
||||
</blockquote>
|
||||
<p>Restore shortcut responses</p>
|
||||
<h3>save()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.3+</p>
|
||||
</blockquote>
|
||||
<p>Save the current registered shortcut data, then clear the shortcut data</p>
|
||||
<h3>restore()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.3+</p>
|
||||
</blockquote>
|
||||
<p>Restore saved shortcut data, then clear the cache data</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
40
web/src/pages/Doc/en/keyboardNavigation/index.md
Normal file
40
web/src/pages/Doc/en/keyboardNavigation/index.md
Normal file
@ -0,0 +1,40 @@
|
||||
# KeyboardNavigation instance
|
||||
|
||||
> v0.2.17+
|
||||
|
||||
`KeyboardNavigation` instance is responsible for handling keyboard navigation, that is, when you press the direction key, it will automatically find the next node and activate it, can be obtained through `mindMap.keyboardNavigation`
|
||||
|
||||
## Methods
|
||||
|
||||
### focus(dir)
|
||||
|
||||
`dir`：Which direction to find the next node，Optional value：`Left`、 `Up`、 `Right`、 `Down`
|
||||
|
||||
Focus on the next node
|
||||
|
||||
### getNodeRect(node)
|
||||
|
||||
`node`：Node
|
||||
|
||||
Get the location information of the node and return an object:
|
||||
|
||||
```js
|
||||
{
|
||||
left,
|
||||
top,
|
||||
right,
|
||||
bottom
|
||||
}
|
||||
```
|
||||
|
||||
### getDistance(node1Rect, node2Rect)
|
||||
|
||||
`node1Rect`、`node2Rect`：The location data of nodes can be obtained through the `getNodeRect(node)`
|
||||
|
||||
Get the distance between two nodes
|
||||
|
||||
### getCenter(nodeRect)
|
||||
|
||||
`nodeRect`：The location data of nodes can be obtained through the `getNodeRect(node)`
|
||||
|
||||
Get the center point of the node
|
||||
40
web/src/pages/Doc/en/keyboardNavigation/index.vue
Normal file
40
web/src/pages/Doc/en/keyboardNavigation/index.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>KeyboardNavigation instance</h1>
|
||||
<blockquote>
|
||||
<p>v0.2.17+</p>
|
||||
</blockquote>
|
||||
<p><code>KeyboardNavigation</code> instance is responsible for handling keyboard navigation, that is, when you press the direction key, it will automatically find the next node and activate it, can be obtained through <code>mindMap.keyboardNavigation</code></p>
|
||||
<h2>Methods</h2>
|
||||
<h3>focus(dir)</h3>
|
||||
<p><code>dir</code>：Which direction to find the next node，Optional value：<code>Left</code>、 <code>Up</code>、 <code>Right</code>、 <code>Down</code></p>
|
||||
<p>Focus on the next node</p>
|
||||
<h3>getNodeRect(node)</h3>
|
||||
<p><code>node</code>：Node</p>
|
||||
<p>Get the location information of the node and return an object:</p>
|
||||
<pre class="hljs"><code>{
|
||||
left,
|
||||
top,
|
||||
right,
|
||||
bottom
|
||||
}
|
||||
</code></pre>
|
||||
<h3>getDistance(node1Rect, node2Rect)</h3>
|
||||
<p><code>node1Rect</code>、<code>node2Rect</code>：The location data of nodes can be obtained through the <code>getNodeRect(node)</code></p>
|
||||
<p>Get the distance between two nodes</p>
|
||||
<h3>getCenter(nodeRect)</h3>
|
||||
<p><code>nodeRect</code>：The location data of nodes can be obtained through the <code>getNodeRect(node)</code></p>
|
||||
<p>Get the center point of the node</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
103
web/src/pages/Doc/en/miniMap/index.md
Normal file
103
web/src/pages/Doc/en/miniMap/index.md
Normal file
@ -0,0 +1,103 @@
|
||||
# MiniMap instance
|
||||
|
||||
> v0.2.11+
|
||||
|
||||
Used to help quickly develop a small map feature, the small map consists of two
|
||||
parts, one is the current canvas content, and the other is the viewport frame.
|
||||
When zoomed, moved, or there are too many elements, the canvas may only display
|
||||
part of the mind map content. The viewport frame can be used to view the current
|
||||
viewport location, and can be quickly positioned by dragging on the small map.
|
||||
|
||||
The `mindMap.miniMap` instance can be obtained through this.
|
||||
|
||||
## Methods
|
||||
|
||||
### getMiniMap()
|
||||
|
||||
Obtain small map related data, this function is generally not used directly, the
|
||||
function returns:
|
||||
|
||||
```js
|
||||
{
|
||||
svg, // Element, the overall svg element of the mind map graphics, including: svg (canvas container), g (actual mind map group)
|
||||
svgHTML, // String, svg string, i.e. html string, can be directly rendered to the small map container you prepared
|
||||
rect: // Object, position, size, etc. of mind map graphics before zoom
|
||||
origWidth, // Number, canvas width
|
||||
origHeight, // Number, canvas height
|
||||
scaleX, // Number, horizontal zoom value of mind map graphics
|
||||
scaleY, // Number, vertical zoom value of mind map graphics
|
||||
}
|
||||
```
|
||||
|
||||
### calculationMiniMap(boxWidth, boxHeight)
|
||||
|
||||
"Calculate the rendering data for the small map, this function will call the
|
||||
`getMiniMap()` method, so using this function is sufficient.
|
||||
|
||||
`boxWidth`: the width of the small map container
|
||||
|
||||
`boxHeight`: the height of the small map container
|
||||
|
||||
Function return content:
|
||||
|
||||
```js
|
||||
{
|
||||
svgHTML, // small map html
|
||||
viewBoxStyle, // view box position information
|
||||
miniMapBoxScale, // view box zoom value
|
||||
miniMapBoxLeft, // view box left value
|
||||
miniMapBoxTop, // view box top value
|
||||
}
|
||||
```
|
||||
|
||||
Small map idea:
|
||||
|
||||
1.Prepare a container element `container`, position is not `static`
|
||||
|
||||
2.In `container`, create a small map container element `miniMapContainer`,
|
||||
absolute positioning
|
||||
|
||||
3.In `container`, create a view box element `viewBoxContainer`, absolute
|
||||
positioning, set border style, transition property (optional)
|
||||
|
||||
4.Listen for `data_change` and `view_data_change` events, and in this event call
|
||||
the `calculationMiniMap` method to get calculation data, then render `svgHTML`
|
||||
to the `miniMapContainer` element and set its style:
|
||||
|
||||
```js
|
||||
:style="{
|
||||
transform: `scale(${svgBoxScale})`,
|
||||
left: svgBoxLeft + 'px',
|
||||
top: svgBoxTop + 'px',
|
||||
}"
|
||||
```
|
||||
|
||||
5.Set the `viewBoxStyle` object as the style of the `viewBoxContainer` element
|
||||
|
||||
At this point, when the mind map on the canvas changes, the small map will also
|
||||
be updated in real time, and the view box element will reflect the position of
|
||||
the viewport on the mind map graph in real time
|
||||
|
||||
6.Listen for the `mousedown`, `mousemove`, and `mouseup` events of the
|
||||
`container` element, and call the three methods that will be introduced below to
|
||||
achieve the effect of the mind map on the canvas being dragged with the mouse
|
||||
|
||||
### onMousedown(e)
|
||||
|
||||
Small map mouse down event executes this function
|
||||
|
||||
`e`: event object
|
||||
|
||||
### onMousemove(e, sensitivityNum = 5)
|
||||
|
||||
This function is executed on the small map mouse move event.
|
||||
|
||||
`e`: event object
|
||||
|
||||
`sensitivityNum`: drag sensitivity, the higher the sensitivity, the greater the
|
||||
actual canvas dragging distance on the small map when dragging the same distance
|
||||
on the small map
|
||||
|
||||
### onMouseup()
|
||||
|
||||
This function is executed on the small map mouse release event.
|
||||
86
web/src/pages/Doc/en/miniMap/index.vue
Normal file
86
web/src/pages/Doc/en/miniMap/index.vue
Normal file
@ -0,0 +1,86 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>MiniMap instance</h1>
|
||||
<blockquote>
|
||||
<p>v0.2.11+</p>
|
||||
</blockquote>
|
||||
<p>Used to help quickly develop a small map feature, the small map consists of two
|
||||
parts, one is the current canvas content, and the other is the viewport frame.
|
||||
When zoomed, moved, or there are too many elements, the canvas may only display
|
||||
part of the mind map content. The viewport frame can be used to view the current
|
||||
viewport location, and can be quickly positioned by dragging on the small map.</p>
|
||||
<p>The <code>mindMap.miniMap</code> instance can be obtained through this.</p>
|
||||
<h2>Methods</h2>
|
||||
<h3>getMiniMap()</h3>
|
||||
<p>Obtain small map related data, this function is generally not used directly, the
|
||||
function returns:</p>
|
||||
<pre class="hljs"><code>{
|
||||
svg, <span class="hljs-comment">// Element, the overall svg element of the mind map graphics, including: svg (canvas container), g (actual mind map group)</span>
|
||||
svgHTML, <span class="hljs-comment">// String, svg string, i.e. html string, can be directly rendered to the small map container you prepared</span>
|
||||
<span class="hljs-attr">rect</span>: <span class="hljs-comment">// Object, position, size, etc. of mind map graphics before zoom</span>
|
||||
origWidth, <span class="hljs-comment">// Number, canvas width</span>
|
||||
origHeight, <span class="hljs-comment">// Number, canvas height</span>
|
||||
scaleX, <span class="hljs-comment">// Number, horizontal zoom value of mind map graphics</span>
|
||||
scaleY, <span class="hljs-comment">// Number, vertical zoom value of mind map graphics</span>
|
||||
}
|
||||
</code></pre>
|
||||
<h3>calculationMiniMap(boxWidth, boxHeight)</h3>
|
||||
<p>"Calculate the rendering data for the small map, this function will call the
|
||||
<code>getMiniMap()</code> method, so using this function is sufficient.</p>
|
||||
<p><code>boxWidth</code>: the width of the small map container</p>
|
||||
<p><code>boxHeight</code>: the height of the small map container</p>
|
||||
<p>Function return content:</p>
|
||||
<pre class="hljs"><code>{
|
||||
svgHTML, <span class="hljs-comment">// small map html</span>
|
||||
viewBoxStyle, <span class="hljs-comment">// view box position information</span>
|
||||
miniMapBoxScale, <span class="hljs-comment">// view box zoom value</span>
|
||||
miniMapBoxLeft, <span class="hljs-comment">// view box left value</span>
|
||||
miniMapBoxTop, <span class="hljs-comment">// view box top value</span>
|
||||
}
|
||||
</code></pre>
|
||||
<p>Small map idea:</p>
|
||||
<p>1.Prepare a container element <code>container</code>, position is not <code>static</code></p>
|
||||
<p>2.In <code>container</code>, create a small map container element <code>miniMapContainer</code>,
|
||||
absolute positioning</p>
|
||||
<p>3.In <code>container</code>, create a view box element <code>viewBoxContainer</code>, absolute
|
||||
positioning, set border style, transition property (optional)</p>
|
||||
<p>4.Listen for <code>data_change</code> and <code>view_data_change</code> events, and in this event call
|
||||
the <code>calculationMiniMap</code> method to get calculation data, then render <code>svgHTML</code>
|
||||
to the <code>miniMapContainer</code> element and set its style:</p>
|
||||
<pre class="hljs"><code>:style=<span class="hljs-string">"{
|
||||
transform: `scale(${svgBoxScale})`,
|
||||
left: svgBoxLeft + 'px',
|
||||
top: svgBoxTop + 'px',
|
||||
}"</span>
|
||||
</code></pre>
|
||||
<p>5.Set the <code>viewBoxStyle</code> object as the style of the <code>viewBoxContainer</code> element</p>
|
||||
<p>At this point, when the mind map on the canvas changes, the small map will also
|
||||
be updated in real time, and the view box element will reflect the position of
|
||||
the viewport on the mind map graph in real time</p>
|
||||
<p>6.Listen for the <code>mousedown</code>, <code>mousemove</code>, and <code>mouseup</code> events of the
|
||||
<code>container</code> element, and call the three methods that will be introduced below to
|
||||
achieve the effect of the mind map on the canvas being dragged with the mouse</p>
|
||||
<h3>onMousedown(e)</h3>
|
||||
<p>Small map mouse down event executes this function</p>
|
||||
<p><code>e</code>: event object</p>
|
||||
<h3>onMousemove(e, sensitivityNum = 5)</h3>
|
||||
<p>This function is executed on the small map mouse move event.</p>
|
||||
<p><code>e</code>: event object</p>
|
||||
<p><code>sensitivityNum</code>: drag sensitivity, the higher the sensitivity, the greater the
|
||||
actual canvas dragging distance on the small map when dragging the same distance
|
||||
on the small map</p>
|
||||
<h3>onMouseup()</h3>
|
||||
<p>This function is executed on the small map mouse release event.</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
236
web/src/pages/Doc/en/node/index.md
Normal file
236
web/src/pages/Doc/en/node/index.md
Normal file
@ -0,0 +1,236 @@
|
||||
# Node instance
|
||||
|
||||
Each node will instantiate a `node` instance
|
||||
|
||||
## Property
|
||||
|
||||
### nodeData
|
||||
|
||||
The real data corresponding to this node
|
||||
|
||||
### uid
|
||||
|
||||
The unique identifier of this node
|
||||
|
||||
### isRoot
|
||||
|
||||
Whether it is the root node
|
||||
|
||||
### layerIndex
|
||||
|
||||
Node level
|
||||
|
||||
### width
|
||||
|
||||
Width of the node
|
||||
|
||||
### height
|
||||
|
||||
Height of the node
|
||||
|
||||
### left
|
||||
|
||||
`left` position of the node
|
||||
|
||||
### top
|
||||
|
||||
`top` position of the node
|
||||
|
||||
### parent
|
||||
|
||||
Parent node of the node
|
||||
|
||||
### children
|
||||
|
||||
List of child nodes of the node
|
||||
|
||||
### group
|
||||
|
||||
Node is the content container, `svg` object
|
||||
|
||||
### isDrag
|
||||
|
||||
> v0.1.5+
|
||||
|
||||
Whether the node is currently being dragged
|
||||
|
||||
## Methods
|
||||
|
||||
### addChildren(node)
|
||||
|
||||
Add a child node
|
||||
|
||||
### getSize()
|
||||
|
||||
Calculate the width and height of the node, return a boolean indicating whether
|
||||
the width and height have changed
|
||||
|
||||
### renderNode()
|
||||
|
||||
Render the node to the canvas, will remove the old content node and create a new
|
||||
one
|
||||
|
||||
### render()
|
||||
|
||||
Recursively render this node and all its child nodes. The first call will create
|
||||
the node content, subsequent calls will only update the node position. To
|
||||
re-render the content, set the `initRender` attribute to `true` first.
|
||||
|
||||
### remove()
|
||||
|
||||
Recursively delete this node and all its child nodes
|
||||
|
||||
### renderLine()
|
||||
|
||||
Re-render the line from this node to its child nodes
|
||||
|
||||
### removeLine()
|
||||
|
||||
Remove the line from this node to its child nodes
|
||||
|
||||
### renderExpandBtn()
|
||||
|
||||
Render the content of the expand/collapse button
|
||||
|
||||
### removeExpandBtn()
|
||||
|
||||
Remove the expand/collapse button
|
||||
|
||||
### getStyle(prop, root, isActive)
|
||||
|
||||
Get the final style value applied to this node
|
||||
|
||||
`prop`: the style property to get
|
||||
|
||||
`root`: whether it is the root node, default `false`
|
||||
|
||||
`isActive`: whether the value being fetched is the active state style value,
|
||||
default `false`
|
||||
|
||||
### setStyle(prop, value, isActive)
|
||||
|
||||
Modify a style of the node, a shortcut method for the `SET_NODE_STYLE` command
|
||||
|
||||
### getData(key)
|
||||
|
||||
Get the specified value in the `data` object of the node's real data `nodeData`,
|
||||
if `key` is not passed, return the `data` object
|
||||
|
||||
### setData(data)
|
||||
|
||||
Set the value of the specified key in the data object of the node's real data
|
||||
nodeData, `SET_NODE_DATA` command's shortcut method
|
||||
|
||||
### setText(text)
|
||||
|
||||
Setting the node text, a shortcut for the `SET_NODE_TEXT` command
|
||||
|
||||
### setImage(imgData)
|
||||
|
||||
Setting the node image, a shortcut for the `SET_NODE_IMAGE` command
|
||||
|
||||
### setIcon(icons)
|
||||
|
||||
Setting the node icon, a shortcut for the `SET_NODE_ICON` command
|
||||
|
||||
### setHyperlink(link, title)
|
||||
|
||||
Setting the node hyperlink, a shortcut for the `SET_NODE_HYPERLINK` command
|
||||
|
||||
### setNote(note)
|
||||
|
||||
Setting the node note, a shortcut for the `SET_NODE_NOTE` command
|
||||
|
||||
### setTag(tag)
|
||||
|
||||
Setting the node tag, a shortcut for the `SET_NODE_TAG` command"
|
||||
|
||||
### hide()
|
||||
|
||||
> v0.1.5+
|
||||
|
||||
Hide node and its sub-nodes
|
||||
|
||||
### show()
|
||||
|
||||
> v0.1.5+
|
||||
|
||||
Show node and its sub-nodes
|
||||
|
||||
### isParent(node)
|
||||
|
||||
> v0.1.5+
|
||||
|
||||
Check if the current node is an ancestor of a certain node
|
||||
|
||||
### isBrother(node)
|
||||
|
||||
> v0.1.5+
|
||||
|
||||
Check if the current node is a sibling of a certain node
|
||||
|
||||
### checkHasGeneralization()
|
||||
|
||||
> v0.2.0+
|
||||
|
||||
Check if there is a summary
|
||||
|
||||
### hideGeneralization()
|
||||
|
||||
> v0.2.0+
|
||||
|
||||
Hide summary node
|
||||
|
||||
### showGeneralization()
|
||||
|
||||
> v0.2.0+
|
||||
|
||||
Show summary node
|
||||
|
||||
### updateGeneralization()
|
||||
|
||||
> v0.2.0+
|
||||
|
||||
Update summary node
|
||||
|
||||
### hasCustomPosition()
|
||||
|
||||
> v0.2.0+
|
||||
|
||||
Check if the node has custom data
|
||||
|
||||
### ancestorHasCustomPosition()
|
||||
|
||||
> v0.2.0+
|
||||
|
||||
Check if there is an ancestor node with custom position
|
||||
|
||||
### getShape()
|
||||
|
||||
> v0.2.4+
|
||||
|
||||
Get node shape
|
||||
|
||||
### setShape(shape)
|
||||
|
||||
> v0.2.4+
|
||||
|
||||
Set node shape, a shortcut method for the `SET_NODE_SHAPE` command
|
||||
|
||||
### getSelfStyle(prop)
|
||||
|
||||
> v0.2.5+
|
||||
|
||||
Get the node's own custom style
|
||||
|
||||
### getParentSelfStyle(prop)
|
||||
|
||||
> v0.2.5+
|
||||
|
||||
Get the custom style of the nearest ancestor node with its own custom style
|
||||
|
||||
### getSelfInhertStyle(prop)
|
||||
|
||||
> v0.2.5+
|
||||
|
||||
Get the node's own inheritable custom style
|
||||
169
web/src/pages/Doc/en/node/index.vue
Normal file
169
web/src/pages/Doc/en/node/index.vue
Normal file
@ -0,0 +1,169 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Node instance</h1>
|
||||
<p>Each node will instantiate a <code>node</code> instance</p>
|
||||
<h2>Property</h2>
|
||||
<h3>nodeData</h3>
|
||||
<p>The real data corresponding to this node</p>
|
||||
<h3>uid</h3>
|
||||
<p>The unique identifier of this node</p>
|
||||
<h3>isRoot</h3>
|
||||
<p>Whether it is the root node</p>
|
||||
<h3>layerIndex</h3>
|
||||
<p>Node level</p>
|
||||
<h3>width</h3>
|
||||
<p>Width of the node</p>
|
||||
<h3>height</h3>
|
||||
<p>Height of the node</p>
|
||||
<h3>left</h3>
|
||||
<p><code>left</code> position of the node</p>
|
||||
<h3>top</h3>
|
||||
<p><code>top</code> position of the node</p>
|
||||
<h3>parent</h3>
|
||||
<p>Parent node of the node</p>
|
||||
<h3>children</h3>
|
||||
<p>List of child nodes of the node</p>
|
||||
<h3>group</h3>
|
||||
<p>Node is the content container, <code>svg</code> object</p>
|
||||
<h3>isDrag</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
</blockquote>
|
||||
<p>Whether the node is currently being dragged</p>
|
||||
<h2>Methods</h2>
|
||||
<h3>addChildren(node)</h3>
|
||||
<p>Add a child node</p>
|
||||
<h3>getSize()</h3>
|
||||
<p>Calculate the width and height of the node, return a boolean indicating whether
|
||||
the width and height have changed</p>
|
||||
<h3>renderNode()</h3>
|
||||
<p>Render the node to the canvas, will remove the old content node and create a new
|
||||
one</p>
|
||||
<h3>render()</h3>
|
||||
<p>Recursively render this node and all its child nodes. The first call will create
|
||||
the node content, subsequent calls will only update the node position. To
|
||||
re-render the content, set the <code>initRender</code> attribute to <code>true</code> first.</p>
|
||||
<h3>remove()</h3>
|
||||
<p>Recursively delete this node and all its child nodes</p>
|
||||
<h3>renderLine()</h3>
|
||||
<p>Re-render the line from this node to its child nodes</p>
|
||||
<h3>removeLine()</h3>
|
||||
<p>Remove the line from this node to its child nodes</p>
|
||||
<h3>renderExpandBtn()</h3>
|
||||
<p>Render the content of the expand/collapse button</p>
|
||||
<h3>removeExpandBtn()</h3>
|
||||
<p>Remove the expand/collapse button</p>
|
||||
<h3>getStyle(prop, root, isActive)</h3>
|
||||
<p>Get the final style value applied to this node</p>
|
||||
<p><code>prop</code>: the style property to get</p>
|
||||
<p><code>root</code>: whether it is the root node, default <code>false</code></p>
|
||||
<p><code>isActive</code>: whether the value being fetched is the active state style value,
|
||||
default <code>false</code></p>
|
||||
<h3>setStyle(prop, value, isActive)</h3>
|
||||
<p>Modify a style of the node, a shortcut method for the <code>SET_NODE_STYLE</code> command</p>
|
||||
<h3>getData(key)</h3>
|
||||
<p>Get the specified value in the <code>data</code> object of the node's real data <code>nodeData</code>,
|
||||
if <code>key</code> is not passed, return the <code>data</code> object</p>
|
||||
<h3>setData(data)</h3>
|
||||
<p>Set the value of the specified key in the data object of the node's real data
|
||||
nodeData, <code>SET_NODE_DATA</code> command's shortcut method</p>
|
||||
<h3>setText(text)</h3>
|
||||
<p>Setting the node text, a shortcut for the <code>SET_NODE_TEXT</code> command</p>
|
||||
<h3>setImage(imgData)</h3>
|
||||
<p>Setting the node image, a shortcut for the <code>SET_NODE_IMAGE</code> command</p>
|
||||
<h3>setIcon(icons)</h3>
|
||||
<p>Setting the node icon, a shortcut for the <code>SET_NODE_ICON</code> command</p>
|
||||
<h3>setHyperlink(link, title)</h3>
|
||||
<p>Setting the node hyperlink, a shortcut for the <code>SET_NODE_HYPERLINK</code> command</p>
|
||||
<h3>setNote(note)</h3>
|
||||
<p>Setting the node note, a shortcut for the <code>SET_NODE_NOTE</code> command</p>
|
||||
<h3>setTag(tag)</h3>
|
||||
<p>Setting the node tag, a shortcut for the <code>SET_NODE_TAG</code> command"</p>
|
||||
<h3>hide()</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
</blockquote>
|
||||
<p>Hide node and its sub-nodes</p>
|
||||
<h3>show()</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
</blockquote>
|
||||
<p>Show node and its sub-nodes</p>
|
||||
<h3>isParent(node)</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
</blockquote>
|
||||
<p>Check if the current node is an ancestor of a certain node</p>
|
||||
<h3>isBrother(node)</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
</blockquote>
|
||||
<p>Check if the current node is a sibling of a certain node</p>
|
||||
<h3>checkHasGeneralization()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.0+</p>
|
||||
</blockquote>
|
||||
<p>Check if there is a summary</p>
|
||||
<h3>hideGeneralization()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.0+</p>
|
||||
</blockquote>
|
||||
<p>Hide summary node</p>
|
||||
<h3>showGeneralization()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.0+</p>
|
||||
</blockquote>
|
||||
<p>Show summary node</p>
|
||||
<h3>updateGeneralization()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.0+</p>
|
||||
</blockquote>
|
||||
<p>Update summary node</p>
|
||||
<h3>hasCustomPosition()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.0+</p>
|
||||
</blockquote>
|
||||
<p>Check if the node has custom data</p>
|
||||
<h3>ancestorHasCustomPosition()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.0+</p>
|
||||
</blockquote>
|
||||
<p>Check if there is an ancestor node with custom position</p>
|
||||
<h3>getShape()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.4+</p>
|
||||
</blockquote>
|
||||
<p>Get node shape</p>
|
||||
<h3>setShape(shape)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.4+</p>
|
||||
</blockquote>
|
||||
<p>Set node shape, a shortcut method for the <code>SET_NODE_SHAPE</code> command</p>
|
||||
<h3>getSelfStyle(prop)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.5+</p>
|
||||
</blockquote>
|
||||
<p>Get the node's own custom style</p>
|
||||
<h3>getParentSelfStyle(prop)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.5+</p>
|
||||
</blockquote>
|
||||
<p>Get the custom style of the nearest ancestor node with its own custom style</p>
|
||||
<h3>getSelfInhertStyle(prop)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.5+</p>
|
||||
</blockquote>
|
||||
<p>Get the node's own inheritable custom style</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
94
web/src/pages/Doc/en/render/index.md
Normal file
94
web/src/pages/Doc/en/render/index.md
Normal file
@ -0,0 +1,94 @@
|
||||
# Render instance
|
||||
|
||||
The `render` instance is responsible for the entire rendering process and can be
|
||||
accessed through `mindMap.renderer`.
|
||||
|
||||
## Properties
|
||||
|
||||
### activeNodeList
|
||||
|
||||
Gets the current list of active nodes
|
||||
|
||||
### root
|
||||
|
||||
Gets the root node of the node tree
|
||||
|
||||
## Methods
|
||||
|
||||
### clearActive()
|
||||
|
||||
Clears the currently active node
|
||||
|
||||
### clearAllActive()
|
||||
|
||||
Clears all currently active nodes and triggers the `node_active` event
|
||||
|
||||
### startTextEdit()
|
||||
|
||||
> v0.1.6+
|
||||
|
||||
If there is a text editing requirement, this method can be called to
|
||||
disable the enter key and delete key related shortcuts to prevent conflicts
|
||||
|
||||
### endTextEdit()
|
||||
|
||||
> v0.1.6+
|
||||
|
||||
End text editing, restore enter key and delete key related shortcuts
|
||||
|
||||
### addActiveNode(node)
|
||||
|
||||
Add a node to the active list
|
||||
|
||||
### removeActiveNode(node)
|
||||
|
||||
Remove a node from the active list
|
||||
|
||||
### findActiveNodeIndex(node)
|
||||
|
||||
Search for the index of a node in the active list
|
||||
|
||||
### getNodeIndex(node)
|
||||
|
||||
Get the position index of a node among its siblings
|
||||
|
||||
### removeOneNode(node)
|
||||
|
||||
Delete a specific node
|
||||
|
||||
### copyNode()
|
||||
|
||||
Copy a node, the active node is the node to be operated on, if there are
|
||||
multiple active nodes, only the first node will be operated on
|
||||
|
||||
### setNodeDataRender(node, data)
|
||||
|
||||
Set node `data`, i.e. the data in the data field, and will determine whether the
|
||||
node needs to be re-rendered based on whether the node size has changed, `data`
|
||||
is an object, e.g. `{text: 'I am new text'}`
|
||||
|
||||
### moveNodeTo(node, toNode)
|
||||
|
||||
> v0.1.5+
|
||||
|
||||
Move a node as a child of another node
|
||||
|
||||
### insertBefore(node, exist)
|
||||
|
||||
> v0.1.5+
|
||||
|
||||
Move a node in front of another node
|
||||
|
||||
### insertAfter(node, exist)
|
||||
|
||||
> v0.1.5+
|
||||
|
||||
Move a node behind another node
|
||||
|
||||
### moveNodeToCenter(node)
|
||||
|
||||
> v0.2.17+
|
||||
|
||||
Move a node to the center of the canvas.
|
||||
|
||||
Currently, if there is zoom, returning to the center will reset the zoom.
|
||||
77
web/src/pages/Doc/en/render/index.vue
Normal file
77
web/src/pages/Doc/en/render/index.vue
Normal file
@ -0,0 +1,77 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Render instance</h1>
|
||||
<p>The <code>render</code> instance is responsible for the entire rendering process and can be
|
||||
accessed through <code>mindMap.renderer</code>.</p>
|
||||
<h2>Properties</h2>
|
||||
<h3>activeNodeList</h3>
|
||||
<p>Gets the current list of active nodes</p>
|
||||
<h3>root</h3>
|
||||
<p>Gets the root node of the node tree</p>
|
||||
<h2>Methods</h2>
|
||||
<h3>clearActive()</h3>
|
||||
<p>Clears the currently active node</p>
|
||||
<h3>clearAllActive()</h3>
|
||||
<p>Clears all currently active nodes and triggers the <code>node_active</code> event</p>
|
||||
<h3>startTextEdit()</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.6+</p>
|
||||
</blockquote>
|
||||
<p>If there is a text editing requirement, this method can be called to
|
||||
disable the enter key and delete key related shortcuts to prevent conflicts</p>
|
||||
<h3>endTextEdit()</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.6+</p>
|
||||
</blockquote>
|
||||
<p>End text editing, restore enter key and delete key related shortcuts</p>
|
||||
<h3>addActiveNode(node)</h3>
|
||||
<p>Add a node to the active list</p>
|
||||
<h3>removeActiveNode(node)</h3>
|
||||
<p>Remove a node from the active list</p>
|
||||
<h3>findActiveNodeIndex(node)</h3>
|
||||
<p>Search for the index of a node in the active list</p>
|
||||
<h3>getNodeIndex(node)</h3>
|
||||
<p>Get the position index of a node among its siblings</p>
|
||||
<h3>removeOneNode(node)</h3>
|
||||
<p>Delete a specific node</p>
|
||||
<h3>copyNode()</h3>
|
||||
<p>Copy a node, the active node is the node to be operated on, if there are
|
||||
multiple active nodes, only the first node will be operated on</p>
|
||||
<h3>setNodeDataRender(node, data)</h3>
|
||||
<p>Set node <code>data</code>, i.e. the data in the data field, and will determine whether the
|
||||
node needs to be re-rendered based on whether the node size has changed, <code>data</code>
|
||||
is an object, e.g. <code>{text: 'I am new text'}</code></p>
|
||||
<h3>moveNodeTo(node, toNode)</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
</blockquote>
|
||||
<p>Move a node as a child of another node</p>
|
||||
<h3>insertBefore(node, exist)</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
</blockquote>
|
||||
<p>Move a node in front of another node</p>
|
||||
<h3>insertAfter(node, exist)</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
</blockquote>
|
||||
<p>Move a node behind another node</p>
|
||||
<h3>moveNodeToCenter(node)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.17+</p>
|
||||
</blockquote>
|
||||
<p>Move a node to the center of the canvas.</p>
|
||||
<p>Currently, if there is zoom, returning to the center will reset the zoom.</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
10
web/src/pages/Doc/en/select/index.md
Normal file
10
web/src/pages/Doc/en/select/index.md
Normal file
@ -0,0 +1,10 @@
|
||||
# Select instance
|
||||
|
||||
The `select` instance is responsible for the mouse right-click multi-selection
|
||||
of nodes, and can be obtained through `mindMap.select`
|
||||
|
||||
## Method
|
||||
|
||||
### toPos(x, y)
|
||||
|
||||
Convert mouse position to position relative to the container `el`
|
||||
21
web/src/pages/Doc/en/select/index.vue
Normal file
21
web/src/pages/Doc/en/select/index.vue
Normal file
@ -0,0 +1,21 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Select instance</h1>
|
||||
<p>The <code>select</code> instance is responsible for the mouse right-click multi-selection
|
||||
of nodes, and can be obtained through <code>mindMap.select</code></p>
|
||||
<h2>Method</h2>
|
||||
<h3>toPos(x, y)</h3>
|
||||
<p>Convert mouse position to position relative to the container <code>el</code></p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
98
web/src/pages/Doc/en/start/index.md
Normal file
98
web/src/pages/Doc/en/start/index.md
Normal file
@ -0,0 +1,98 @@
|
||||
# Start
|
||||
|
||||
## Development
|
||||
|
||||
### Local Development
|
||||
|
||||
```bash
|
||||
git clone https://github.com/wanglin2/mind-map.git
|
||||
cd simple-mind-map
|
||||
npm i
|
||||
npm link
|
||||
cd ..
|
||||
cd web
|
||||
npm i
|
||||
npm link simple-mind-map
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### Packaging the Library
|
||||
|
||||
Since version `0.2.0`, we have added support for packaging the core library
|
||||
simple-mind-map. This uses the same packaging tool as the sample project web.
|
||||
|
||||
```bash
|
||||
cd web
|
||||
npm run buildLibrary
|
||||
```
|
||||
|
||||
The `package.json` file in the `simple-mind-map` library provides two export
|
||||
fields:
|
||||
|
||||
```json
|
||||
{
|
||||
"module": "index.js",
|
||||
"main": "./dist/simpleMindMap.umd.min.js"
|
||||
}
|
||||
```
|
||||
|
||||
Environments that support the `module` field will use `index.js` as the entry
|
||||
point, otherwise the packed `simpleMindMap.umd.min.js` will be used as the entry
|
||||
point.
|
||||
|
||||
### Packaging the Demo
|
||||
|
||||
```bash
|
||||
cd web
|
||||
npm run build
|
||||
```
|
||||
|
||||
The `index.html` file will be automatically moved to the root directory.
|
||||
|
||||
## Installation
|
||||
|
||||
> Things to note before version 0.2.0:
|
||||
|
||||
```bash
|
||||
npm i simple-mind-map
|
||||
```
|
||||
|
||||
`0.2.0` Notes for previous versions:
|
||||
|
||||
> Note: This project is directly published in source code form and has not been
|
||||
> packaged. If compilation fails, a Vue CLI-created project can add the
|
||||
> following configuration to the vue.config.js file to allow babel-loader to
|
||||
> compile this dependency:
|
||||
>
|
||||
> ```js
|
||||
> module.exports = {
|
||||
> transpileDependencies: ["simple-mind-map"],
|
||||
> };
|
||||
> ```
|
||||
>
|
||||
> Other projects should modify the packaging configuration as needed.
|
||||
|
||||
## Problems
|
||||
|
||||
### Error when using in Vite, indicating xml-js dependency error
|
||||
|
||||
Solution: use the following import method:
|
||||
|
||||
```js
|
||||
import MindMap from "simple-mind-map/dist/simpleMindMap.umd.min";
|
||||
```
|
||||
|
||||
The `simple-mind-map` package provides the unpacked entry field `module`, and
|
||||
the `xml-js` package dependency needs to import the package in the `node`
|
||||
environment. Therefore, it cannot be obtained in `Vite` and an error will be
|
||||
reported. Therefore, specify the import of the packed entry, and all relevant
|
||||
packages are packed into the product, so there will be no error.
|
||||
|
||||
If you need to do further development, that is, you must use the unpacked code,
|
||||
and if you do not need to parse the `xmind` file, you can remove the `xmind`
|
||||
module. If you need it, you can try using other libraries to parse `xml` to
|
||||
`json`.
|
||||
|
||||
### Error `Getting bbox of element "text" is not possible: TypeError: Cannot read properties of undefined (reading 'apply')`
|
||||
|
||||
The reason is that the installed version of `@svgdotjs/svg.js` is too high. You can manually reduce it to the version of `3.0.16`.
|
||||
83
web/src/pages/Doc/en/start/index.vue
Normal file
83
web/src/pages/Doc/en/start/index.vue
Normal file
@ -0,0 +1,83 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Start</h1>
|
||||
<h2>Development</h2>
|
||||
<h3>Local Development</h3>
|
||||
<pre class="hljs"><code>git <span class="hljs-built_in">clone</span> https://github.com/wanglin2/mind-map.git
|
||||
<span class="hljs-built_in">cd</span> simple-mind-map
|
||||
npm i
|
||||
npm link
|
||||
<span class="hljs-built_in">cd</span> ..
|
||||
<span class="hljs-built_in">cd</span> web
|
||||
npm i
|
||||
npm link simple-mind-map
|
||||
npm run serve
|
||||
</code></pre>
|
||||
<h3>Packaging the Library</h3>
|
||||
<p>Since version <code>0.2.0</code>, we have added support for packaging the core library
|
||||
simple-mind-map. This uses the same packaging tool as the sample project web.</p>
|
||||
<pre class="hljs"><code><span class="hljs-built_in">cd</span> web
|
||||
npm run buildLibrary
|
||||
</code></pre>
|
||||
<p>The <code>package.json</code> file in the <code>simple-mind-map</code> library provides two export
|
||||
fields:</p>
|
||||
<pre class="hljs"><code>{
|
||||
<span class="hljs-attr">"module"</span>: <span class="hljs-string">"index.js"</span>,
|
||||
<span class="hljs-attr">"main"</span>: <span class="hljs-string">"./dist/simpleMindMap.umd.min.js"</span>
|
||||
}
|
||||
</code></pre>
|
||||
<p>Environments that support the <code>module</code> field will use <code>index.js</code> as the entry
|
||||
point, otherwise the packed <code>simpleMindMap.umd.min.js</code> will be used as the entry
|
||||
point.</p>
|
||||
<h3>Packaging the Demo</h3>
|
||||
<pre class="hljs"><code><span class="hljs-built_in">cd</span> web
|
||||
npm run build
|
||||
</code></pre>
|
||||
<p>The <code>index.html</code> file will be automatically moved to the root directory.</p>
|
||||
<h2>Installation</h2>
|
||||
<blockquote>
|
||||
<p>Things to note before version 0.2.0:</p>
|
||||
</blockquote>
|
||||
<pre class="hljs"><code>npm i simple-mind-map
|
||||
</code></pre>
|
||||
<p><code>0.2.0</code> Notes for previous versions:</p>
|
||||
<blockquote>
|
||||
<p>Note: This project is directly published in source code form and has not been
|
||||
packaged. If compilation fails, a Vue CLI-created project can add the
|
||||
following configuration to the vue.config.js file to allow babel-loader to
|
||||
compile this dependency:</p>
|
||||
<pre class="hljs"><code><span class="hljs-built_in">module</span>.exports = {
|
||||
<span class="hljs-attr">transpileDependencies</span>: [<span class="hljs-string">"simple-mind-map"</span>],
|
||||
};
|
||||
</code></pre>
|
||||
<p>Other projects should modify the packaging configuration as needed.</p>
|
||||
</blockquote>
|
||||
<h2>Problems</h2>
|
||||
<h3>Error when using in Vite, indicating xml-js dependency error</h3>
|
||||
<p>Solution: use the following import method:</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">"simple-mind-map/dist/simpleMindMap.umd.min"</span>;
|
||||
</code></pre>
|
||||
<p>The <code>simple-mind-map</code> package provides the unpacked entry field <code>module</code>, and
|
||||
the <code>xml-js</code> package dependency needs to import the package in the <code>node</code>
|
||||
environment. Therefore, it cannot be obtained in <code>Vite</code> and an error will be
|
||||
reported. Therefore, specify the import of the packed entry, and all relevant
|
||||
packages are packed into the product, so there will be no error.</p>
|
||||
<p>If you need to do further development, that is, you must use the unpacked code,
|
||||
and if you do not need to parse the <code>xmind</code> file, you can remove the <code>xmind</code>
|
||||
module. If you need it, you can try using other libraries to parse <code>xml</code> to
|
||||
<code>json</code>.</p>
|
||||
<h3>Error <code>Getting bbox of element "text" is not possible: TypeError: Cannot read properties of undefined (reading 'apply')</code></h3>
|
||||
<p>The reason is that the installed version of <code>@svgdotjs/svg.js</code> is too high. You can manually reduce it to the version of <code>3.0.16</code>.</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
18
web/src/pages/Doc/en/translate/index.md
Normal file
18
web/src/pages/Doc/en/translate/index.md
Normal file
@ -0,0 +1,18 @@
|
||||
# Participate in translation
|
||||
|
||||
Thanks for the English translation provided by [Emircan ERKUL](https://github.com/emircanerkul).
|
||||
|
||||
If you want to participate in the translation of this document, you can clone this repository first.
|
||||
|
||||
The translated documents are in the `/web/src/pages/Doc/` directory, and currently support English(`en`) and Simplified Chinese(`zh`).
|
||||
|
||||
If you are adding a new language type, you can create a new directory under the `/web/src/pages/Doc/` directory, Then create a folder for each chapter, You can also directly copy all chapter directories under the existing language directory for translation, Note that you only need to write the `index.md` file, The `index.vue` file under the chapter directory is automatically generated by the script according to `index.md`.
|
||||
|
||||
If you are adding a translation chapter to an existing language type, You can create a new chapter directory under the target language directory, You only need to create a `index.md` file under the directory.
|
||||
|
||||
After you complete the translation, you can directly submit `Pull requests`.
|
||||
|
||||
If you are a front-end programmer and want to run the service, check the effect of the document page, If a new chapter is added, the file `/web/src/pages/Doc/catalogList.js` needs to be modified, Select the appropriate location in the `StartList` or `APIList` array to insert the `path` of the new chapter. Then you need to run `npm run buildDoc` under the `web` directory to compile the directory and route. Finally, run `npm run serve` starts the local service. Open the following path to view the document:
|
||||
|
||||
`ip:port/#/doc/zh/introduction`
|
||||
|
||||
24
web/src/pages/Doc/en/translate/index.vue
Normal file
24
web/src/pages/Doc/en/translate/index.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Participate in translation</h1>
|
||||
<p>Thanks for the English translation provided by <a href="https://github.com/emircanerkul">Emircan ERKUL</a>.</p>
|
||||
<p>If you want to participate in the translation of this document, you can clone this repository first.</p>
|
||||
<p>The translated documents are in the <code>/web/src/pages/Doc/</code> directory, and currently support English(<code>en</code>) and Simplified Chinese(<code>zh</code>).</p>
|
||||
<p>If you are adding a new language type, you can create a new directory under the <code>/web/src/pages/Doc/</code> directory, Then create a folder for each chapter, You can also directly copy all chapter directories under the existing language directory for translation, Note that you only need to write the <code>index.md</code> file, The <code>index.vue</code> file under the chapter directory is automatically generated by the script according to <code>index.md</code>.</p>
|
||||
<p>If you are adding a translation chapter to an existing language type, You can create a new chapter directory under the target language directory, You only need to create a <code>index.md</code> file under the directory.</p>
|
||||
<p>After you complete the translation, you can directly submit <code>Pull requests</code>.</p>
|
||||
<p>If you are a front-end programmer and want to run the service, check the effect of the document page, If a new chapter is added, the file <code>/web/src/pages/Doc/catalogList.js</code> needs to be modified, Select the appropriate location in the <code>StartList</code> or <code>APIList</code> array to insert the <code>path</code> of the new chapter. Then you need to run <code>npm run buildDoc</code> under the <code>web</code> directory to compile the directory and route. Finally, run <code>npm run serve</code> starts the local service. Open the following path to view the document:</p>
|
||||
<p><code>ip:port/#/doc/zh/introduction</code></p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
96
web/src/pages/Doc/en/utils/index.md
Normal file
96
web/src/pages/Doc/en/utils/index.md
Normal file
@ -0,0 +1,96 @@
|
||||
# Utility Methods
|
||||
|
||||
Reference:
|
||||
|
||||
```js
|
||||
import {walk, ...} from 'simple-mind-map/src/utils'
|
||||
```
|
||||
|
||||
## Methods
|
||||
|
||||
### walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)
|
||||
|
||||
Depth-first traversal of a tree
|
||||
|
||||
`root`: the root node of the tree to be traversed
|
||||
|
||||
`parent`: parent node
|
||||
|
||||
`beforeCallback`: preorder traversal callback function, callback parameters are:
|
||||
root, parent, isRoot, layerIndex, index
|
||||
|
||||
`afterCallback`: postorder traversal callback function, callback parameters are:
|
||||
root, parent, isRoot, layerIndex, index
|
||||
|
||||
`isRoot`: whether it is the root node
|
||||
|
||||
`layerIndex`: node level
|
||||
|
||||
`index`: index of the node among its siblings
|
||||
|
||||
Example:
|
||||
|
||||
```js
|
||||
walk(tree, null, () => {}, () => {}, false, 0, 0);
|
||||
```
|
||||
|
||||
### bfsWalk(root, callback)
|
||||
|
||||
Breadth-first traversal of a tree
|
||||
|
||||
### resizeImgSize(width, height, maxWidth, maxHeight)
|
||||
|
||||
Resize image size
|
||||
|
||||
`width`: original width of the image
|
||||
|
||||
`height`: original height of the image
|
||||
|
||||
`maxWidth`: the width to resize to
|
||||
|
||||
`maxHeight`: the height to resize to
|
||||
|
||||
`maxWidth` and `maxHeight` can both be passed, or only one of them can be passed
|
||||
|
||||
### resizeImg(imgUrl, maxWidth, maxHeight)
|
||||
|
||||
Resize image, internally loads the image first, then calls the `resizeImgSize`
|
||||
method, and returns a `promise`
|
||||
|
||||
### simpleDeepClone(data)
|
||||
|
||||
Extremely simple deep copy method, can only be used for objects that are all
|
||||
basic data, otherwise it will throw an error
|
||||
|
||||
### copyRenderTree(tree, root)
|
||||
|
||||
Copy render tree data, example:
|
||||
|
||||
```js
|
||||
copyRenderTree({}, this.mindMap.renderer.renderTree);
|
||||
```
|
||||
|
||||
### copyNodeTree(tree, root)
|
||||
|
||||
Copy node tree data, mainly eliminating the reference `node` instance `_node`
|
||||
and copying the `data` of the data object, example:
|
||||
|
||||
```js
|
||||
copyNodeTree({}, node);
|
||||
```
|
||||
|
||||
### imgToDataUrl(src)
|
||||
|
||||
Convert image to dataURL
|
||||
|
||||
### downloadFile(file, fileName)
|
||||
|
||||
Download file
|
||||
|
||||
### throttle(fn, time = 300, ctx)
|
||||
|
||||
Throttle function
|
||||
|
||||
### asyncRun(taskList, callback = () => {})
|
||||
|
||||
Run tasks in task list asynchronously, tasks are run synchronously without order
|
||||
66
web/src/pages/Doc/en/utils/index.vue
Normal file
66
web/src/pages/Doc/en/utils/index.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Utility Methods</h1>
|
||||
<p>Reference:</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> {walk, ...} <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map/src/utils'</span>
|
||||
</code></pre>
|
||||
<h2>Methods</h2>
|
||||
<h3>walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)</h3>
|
||||
<p>Depth-first traversal of a tree</p>
|
||||
<p><code>root</code>: the root node of the tree to be traversed</p>
|
||||
<p><code>parent</code>: parent node</p>
|
||||
<p><code>beforeCallback</code>: preorder traversal callback function, callback parameters are:
|
||||
root, parent, isRoot, layerIndex, index</p>
|
||||
<p><code>afterCallback</code>: postorder traversal callback function, callback parameters are:
|
||||
root, parent, isRoot, layerIndex, index</p>
|
||||
<p><code>isRoot</code>: whether it is the root node</p>
|
||||
<p><code>layerIndex</code>: node level</p>
|
||||
<p><code>index</code>: index of the node among its siblings</p>
|
||||
<p>Example:</p>
|
||||
<pre class="hljs"><code>walk(tree, <span class="hljs-literal">null</span>, <span class="hljs-function">() =></span> {}, <span class="hljs-function">() =></span> {}, <span class="hljs-literal">false</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>);
|
||||
</code></pre>
|
||||
<h3>bfsWalk(root, callback)</h3>
|
||||
<p>Breadth-first traversal of a tree</p>
|
||||
<h3>resizeImgSize(width, height, maxWidth, maxHeight)</h3>
|
||||
<p>Resize image size</p>
|
||||
<p><code>width</code>: original width of the image</p>
|
||||
<p><code>height</code>: original height of the image</p>
|
||||
<p><code>maxWidth</code>: the width to resize to</p>
|
||||
<p><code>maxHeight</code>: the height to resize to</p>
|
||||
<p><code>maxWidth</code> and <code>maxHeight</code> can both be passed, or only one of them can be passed</p>
|
||||
<h3>resizeImg(imgUrl, maxWidth, maxHeight)</h3>
|
||||
<p>Resize image, internally loads the image first, then calls the <code>resizeImgSize</code>
|
||||
method, and returns a <code>promise</code></p>
|
||||
<h3>simpleDeepClone(data)</h3>
|
||||
<p>Extremely simple deep copy method, can only be used for objects that are all
|
||||
basic data, otherwise it will throw an error</p>
|
||||
<h3>copyRenderTree(tree, root)</h3>
|
||||
<p>Copy render tree data, example:</p>
|
||||
<pre class="hljs"><code>copyRenderTree({}, <span class="hljs-built_in">this</span>.mindMap.renderer.renderTree);
|
||||
</code></pre>
|
||||
<h3>copyNodeTree(tree, root)</h3>
|
||||
<p>Copy node tree data, mainly eliminating the reference <code>node</code> instance <code>_node</code>
|
||||
and copying the <code>data</code> of the data object, example:</p>
|
||||
<pre class="hljs"><code>copyNodeTree({}, node);
|
||||
</code></pre>
|
||||
<h3>imgToDataUrl(src)</h3>
|
||||
<p>Convert image to dataURL</p>
|
||||
<h3>downloadFile(file, fileName)</h3>
|
||||
<p>Download file</p>
|
||||
<h3>throttle(fn, time = 300, ctx)</h3>
|
||||
<p>Throttle function</p>
|
||||
<h3>asyncRun(taskList, callback = () => {})</h3>
|
||||
<p>Run tasks in task list asynchronously, tasks are run synchronously without order</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
57
web/src/pages/Doc/en/view/index.md
Normal file
57
web/src/pages/Doc/en/view/index.md
Normal file
@ -0,0 +1,57 @@
|
||||
# View instance
|
||||
|
||||
The `view` instance is responsible for view operations, and can be obtained
|
||||
through `mindMap.view`
|
||||
|
||||
## Methods
|
||||
|
||||
### translateX(step)
|
||||
|
||||
Translate in the `x` direction, `step`: number of pixels to translate
|
||||
|
||||
### translateY(step)
|
||||
|
||||
Translate in the `y` direction, `step`: number of pixels to translate
|
||||
|
||||
### translateXTo(x)
|
||||
|
||||
> v0.2.11+
|
||||
|
||||
Translate the `x` direction to a specific position
|
||||
|
||||
### translateYTo(y)
|
||||
|
||||
> v0.2.11+
|
||||
|
||||
Translate the `y` direction to a specific position
|
||||
|
||||
### reset()
|
||||
|
||||
Revert to the default transformation
|
||||
|
||||
### narrow()
|
||||
|
||||
Zoom out
|
||||
|
||||
### enlarge()
|
||||
|
||||
Zoom in
|
||||
|
||||
### getTransformData()
|
||||
|
||||
> v0.1.1+
|
||||
|
||||
Get the current transform data, can be used for display
|
||||
|
||||
### setTransformData(data)
|
||||
|
||||
> v0.1.1+
|
||||
|
||||
Dynamically set transform data, transform data can be obtained through the
|
||||
getTransformData method"
|
||||
|
||||
### setScale(scale)
|
||||
|
||||
> v0.2.17+
|
||||
|
||||
Setting Zoom
|
||||
55
web/src/pages/Doc/en/view/index.vue
Normal file
55
web/src/pages/Doc/en/view/index.vue
Normal file
@ -0,0 +1,55 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>View instance</h1>
|
||||
<p>The <code>view</code> instance is responsible for view operations, and can be obtained
|
||||
through <code>mindMap.view</code></p>
|
||||
<h2>Methods</h2>
|
||||
<h3>translateX(step)</h3>
|
||||
<p>Translate in the <code>x</code> direction, <code>step</code>: number of pixels to translate</p>
|
||||
<h3>translateY(step)</h3>
|
||||
<p>Translate in the <code>y</code> direction, <code>step</code>: number of pixels to translate</p>
|
||||
<h3>translateXTo(x)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.11+</p>
|
||||
</blockquote>
|
||||
<p>Translate the <code>x</code> direction to a specific position</p>
|
||||
<h3>translateYTo(y)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.11+</p>
|
||||
</blockquote>
|
||||
<p>Translate the <code>y</code> direction to a specific position</p>
|
||||
<h3>reset()</h3>
|
||||
<p>Revert to the default transformation</p>
|
||||
<h3>narrow()</h3>
|
||||
<p>Zoom out</p>
|
||||
<h3>enlarge()</h3>
|
||||
<p>Zoom in</p>
|
||||
<h3>getTransformData()</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.1+</p>
|
||||
</blockquote>
|
||||
<p>Get the current transform data, can be used for display</p>
|
||||
<h3>setTransformData(data)</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.1+</p>
|
||||
</blockquote>
|
||||
<p>Dynamically set transform data, transform data can be obtained through the
|
||||
getTransformData method"</p>
|
||||
<h3>setScale(scale)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.17+</p>
|
||||
</blockquote>
|
||||
<p>Setting Zoom</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
15
web/src/pages/Doc/i18n.js
Normal file
15
web/src/pages/Doc/i18n.js
Normal file
@ -0,0 +1,15 @@
|
||||
const data = {
|
||||
pageCatalog: {
|
||||
zh: '本页目录',
|
||||
en: 'Page catalog'
|
||||
},
|
||||
demo: {
|
||||
zh: '在线示例',
|
||||
en: 'Online Demo'
|
||||
}
|
||||
}
|
||||
|
||||
const t = (str, lang) => {
|
||||
return data[str] ? data[str][lang] || data[str].zh : ''
|
||||
}
|
||||
export default t
|
||||
3
web/src/pages/Doc/routerList.js
Normal file
3
web/src/pages/Doc/routerList.js
Normal file
@ -0,0 +1,3 @@
|
||||
|
||||
export default [{"lang":"zh","children":[{"path":"batchExecution","title":"BatchExecution实例"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"Command实例"},{"path":"constructor","title":"构造函数"},{"path":"doExport","title":"DoExport实例"},{"path":"introduction","title":"简介"},{"path":"keyboardNavigation","title":"KeyboardNavigation实例"},{"path":"keyCommand","title":"KeyCommand实例"},{"path":"miniMap","title":"MiniMap实例"},{"path":"node","title":"Node实例"},{"path":"render","title":"Render实例"},{"path":"select","title":"Select实例"},{"path":"start","title":"开始"},{"path":"translate","title":"参与翻译"},{"path":"utils","title":"内置工具方法"},{"path":"view","title":"View实例"}]},{"lang":"en","children":[{"path":"batchExecution","title":"batchExecution instance"},{"path":"changelog","title":"Changelog"},{"path":"command","title":"command instance"},{"path":"constructor","title":"Constructor"},{"path":"doExport","title":"DoExport instance"},{"path":"introduction","title":"Introduction"},{"path":"keyboardNavigation","title":"KeyboardNavigation instance"},{"path":"keyCommand","title":"KeyCommand instance"},{"path":"miniMap","title":"MiniMap instance"},{"path":"node","title":"Node instance"},{"path":"render","title":"Render instance"},{"path":"select","title":"Select instance"},{"path":"start","title":"Start"},{"path":"translate","title":"Participate in translation"},{"path":"utils","title":"Utility Methods"},{"path":"view","title":"View instance"}]}]
|
||||
|
||||
13
web/src/pages/Doc/zh/batchExecution/index.md
Normal file
13
web/src/pages/Doc/zh/batchExecution/index.md
Normal file
@ -0,0 +1,13 @@
|
||||
# BatchExecution实例
|
||||
|
||||
`batchExecution`用来批量异步的执行一些操作，如果某个操作同时多次调用，那么只会在下一个事件循环里执行一次。可以通过`mindMap.batchExecution`获取到该实例
|
||||
|
||||
## 方法
|
||||
|
||||
### push(name, fn)
|
||||
|
||||
添加任务。
|
||||
|
||||
`name`：任务名称
|
||||
|
||||
`fn`：任务
|
||||
22
web/src/pages/Doc/zh/batchExecution/index.vue
Normal file
22
web/src/pages/Doc/zh/batchExecution/index.vue
Normal file
@ -0,0 +1,22 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>BatchExecution实例</h1>
|
||||
<p><code>batchExecution</code>用来批量异步的执行一些操作，如果某个操作同时多次调用，那么只会在下一个事件循环里执行一次。可以通过<code>mindMap.batchExecution</code>获取到该实例</p>
|
||||
<h2>方法</h2>
|
||||
<h3>push(name, fn)</h3>
|
||||
<p>添加任务。</p>
|
||||
<p><code>name</code>：任务名称</p>
|
||||
<p><code>fn</code>：任务</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
145
web/src/pages/Doc/zh/changelog/index.md
Normal file
145
web/src/pages/Doc/zh/changelog/index.md
Normal file
@ -0,0 +1,145 @@
|
||||
# Changelog
|
||||
|
||||
## 0.2.23
|
||||
|
||||
新增：支持注册新主题。
|
||||
|
||||
## 0.2.22
|
||||
|
||||
优化：取消内置`simple-mind-map`包的主题和结构图片，改为由使用者自行维护，原有图片可在`web/assets/img/`目录找到。
|
||||
|
||||
## 0.2.21
|
||||
|
||||
新增：支持节点横线风格。
|
||||
|
||||
## 0.2.20
|
||||
|
||||
修复：画布距窗口左上角不为0时节点拖拽出现偏移的问题。
|
||||
|
||||
## 0.2.19
|
||||
|
||||
修复：没有激活节点时随便按什么键都会触发自动聚焦的问题。
|
||||
|
||||
## 0.2.18
|
||||
|
||||
优化：键盘导航寻找焦点的算法，支持简单算法、区域算法、阴影算法。
|
||||
|
||||
## 0.2.17
|
||||
|
||||
新增：键盘导航，即通过方向键来切换激活的节点；支持在大纲直接编辑节点文本内容。
|
||||
|
||||
## 0.2.16
|
||||
|
||||
优化：小地图、拖拽性能。
|
||||
|
||||
## 0.2.15
|
||||
|
||||
优化：本地文件编辑。
|
||||
|
||||
新增：支持双击节点内图片进行大图预览。
|
||||
|
||||
## 0.2.14
|
||||
|
||||
优化：插入子节点时自动展开。
|
||||
|
||||
修复：小地图关闭时报错的问题。
|
||||
|
||||
## 0.2.13
|
||||
|
||||
修复：子节点收起状态复制时丢失的问题。
|
||||
|
||||
## 0.2.11
|
||||
|
||||
修复：修复子节点收起状态复制时丢失的问题。
|
||||
|
||||
新增：支持小地图。
|
||||
|
||||
## 0.2.10
|
||||
|
||||
优化：手动创建节点时立即聚焦。
|
||||
|
||||
修复：连线样式深度更新问题。
|
||||
|
||||
新增：逻辑结构图、思维导图新增直线连接风格、直连风格。
|
||||
|
||||
## 0.2.9
|
||||
|
||||
新增：支持新建、打开、保存到电脑本地文件。
|
||||
|
||||
## 0.2.8
|
||||
|
||||
修复：xmind8版本文件导入失败的问题。
|
||||
|
||||
新增：支持展开到指定层级。
|
||||
|
||||
## 0.2.7
|
||||
|
||||
修复：根节点添加多个节点爆栈的问题。
|
||||
|
||||
新增：支持导入.xmind文件。
|
||||
|
||||
## 0.2.6
|
||||
|
||||
新增：导出svg增加title标签。
|
||||
|
||||
## 0.2.5
|
||||
|
||||
修复：节点展开收起的bug。
|
||||
|
||||
新增：节点支持自定义线条样式。
|
||||
|
||||
## 0.2.4
|
||||
|
||||
新增：节点支持多种形状。
|
||||
|
||||
## 0.2.3
|
||||
|
||||
修复：编辑节点文本时快捷键冲突的问题；右键菜单快捷键提示错误；右键菜单快捷键提示。
|
||||
|
||||
## 0.2.2
|
||||
|
||||
修复：输入字符串'/'和快捷键'/'冲突问题。
|
||||
|
||||
## 0.2.1
|
||||
|
||||
新增：支持导出为pdf。
|
||||
|
||||
## 0.2.0
|
||||
|
||||
新增：经典4主题；支持添加概要；支持自由拖拽；上移节点、下移节点、复制节点、剪切节点、粘贴节点、一键整理布快捷键；库打包；Ctrl+左键多选。
|
||||
|
||||
## 0.1.18
|
||||
|
||||
修复：节点图标不能删除的问题；工具按钮置灰仍然可以点击的问题。
|
||||
|
||||
## 0.1.17
|
||||
|
||||
新增：增加只读模式。
|
||||
|
||||
## 0.1.16
|
||||
|
||||
新增：节点备注支持markdown及富文本。
|
||||
|
||||
修复：不能选中文字的问题；节点标注在节点激活后无法隐藏问题；超链接、备注、标签等文字编辑时返回键和回车键与思维导图快捷键冲突的问题。
|
||||
|
||||
## 0.1.15
|
||||
|
||||
新增：状态数据支持保存激活状态、视图状态（拖动位置、缩放值）；支持节点拖拽。
|
||||
|
||||
## 0.1.14
|
||||
|
||||
修复：存在激活节点时设置主题存在的问题。
|
||||
|
||||
## 0.1.13
|
||||
|
||||
新增：快捷键功能；新增导出为json。
|
||||
|
||||
优化：一些细节。
|
||||
|
||||
## 0.1.12
|
||||
|
||||
新增：本地存储；右键菜单功能等。
|
||||
|
||||
## 0.1.0
|
||||
|
||||
完成基本功能。
|
||||
88
web/src/pages/Doc/zh/changelog/index.vue
Normal file
88
web/src/pages/Doc/zh/changelog/index.vue
Normal file
@ -0,0 +1,88 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Changelog</h1>
|
||||
<h2>0.2.23</h2>
|
||||
<p>新增：支持注册新主题。</p>
|
||||
<h2>0.2.22</h2>
|
||||
<p>优化：取消内置<code>simple-mind-map</code>包的主题和结构图片，改为由使用者自行维护，原有图片可在<code>web/assets/img/</code>目录找到。</p>
|
||||
<h2>0.2.21</h2>
|
||||
<p>新增：支持节点横线风格。</p>
|
||||
<h2>0.2.20</h2>
|
||||
<p>修复：画布距窗口左上角不为0时节点拖拽出现偏移的问题。</p>
|
||||
<h2>0.2.19</h2>
|
||||
<p>修复：没有激活节点时随便按什么键都会触发自动聚焦的问题。</p>
|
||||
<h2>0.2.18</h2>
|
||||
<p>优化：键盘导航寻找焦点的算法，支持简单算法、区域算法、阴影算法。</p>
|
||||
<h2>0.2.17</h2>
|
||||
<p>新增：键盘导航，即通过方向键来切换激活的节点；支持在大纲直接编辑节点文本内容。</p>
|
||||
<h2>0.2.16</h2>
|
||||
<p>优化：小地图、拖拽性能。</p>
|
||||
<h2>0.2.15</h2>
|
||||
<p>优化：本地文件编辑。</p>
|
||||
<p>新增：支持双击节点内图片进行大图预览。</p>
|
||||
<h2>0.2.14</h2>
|
||||
<p>优化：插入子节点时自动展开。</p>
|
||||
<p>修复：小地图关闭时报错的问题。</p>
|
||||
<h2>0.2.13</h2>
|
||||
<p>修复：子节点收起状态复制时丢失的问题。</p>
|
||||
<h2>0.2.11</h2>
|
||||
<p>修复：修复子节点收起状态复制时丢失的问题。</p>
|
||||
<p>新增：支持小地图。</p>
|
||||
<h2>0.2.10</h2>
|
||||
<p>优化：手动创建节点时立即聚焦。</p>
|
||||
<p>修复：连线样式深度更新问题。</p>
|
||||
<p>新增：逻辑结构图、思维导图新增直线连接风格、直连风格。</p>
|
||||
<h2>0.2.9</h2>
|
||||
<p>新增：支持新建、打开、保存到电脑本地文件。</p>
|
||||
<h2>0.2.8</h2>
|
||||
<p>修复：xmind8版本文件导入失败的问题。</p>
|
||||
<p>新增：支持展开到指定层级。</p>
|
||||
<h2>0.2.7</h2>
|
||||
<p>修复：根节点添加多个节点爆栈的问题。</p>
|
||||
<p>新增：支持导入.xmind文件。</p>
|
||||
<h2>0.2.6</h2>
|
||||
<p>新增：导出svg增加title标签。</p>
|
||||
<h2>0.2.5</h2>
|
||||
<p>修复：节点展开收起的bug。</p>
|
||||
<p>新增：节点支持自定义线条样式。</p>
|
||||
<h2>0.2.4</h2>
|
||||
<p>新增：节点支持多种形状。</p>
|
||||
<h2>0.2.3</h2>
|
||||
<p>修复：编辑节点文本时快捷键冲突的问题；右键菜单快捷键提示错误；右键菜单快捷键提示。</p>
|
||||
<h2>0.2.2</h2>
|
||||
<p>修复：输入字符串'/'和快捷键'/'冲突问题。</p>
|
||||
<h2>0.2.1</h2>
|
||||
<p>新增：支持导出为pdf。</p>
|
||||
<h2>0.2.0</h2>
|
||||
<p>新增：经典4主题；支持添加概要；支持自由拖拽；上移节点、下移节点、复制节点、剪切节点、粘贴节点、一键整理布快捷键；库打包；Ctrl+左键多选。</p>
|
||||
<h2>0.1.18</h2>
|
||||
<p>修复：节点图标不能删除的问题；工具按钮置灰仍然可以点击的问题。</p>
|
||||
<h2>0.1.17</h2>
|
||||
<p>新增：增加只读模式。</p>
|
||||
<h2>0.1.16</h2>
|
||||
<p>新增：节点备注支持markdown及富文本。</p>
|
||||
<p>修复：不能选中文字的问题；节点标注在节点激活后无法隐藏问题；超链接、备注、标签等文字编辑时返回键和回车键与思维导图快捷键冲突的问题。</p>
|
||||
<h2>0.1.15</h2>
|
||||
<p>新增：状态数据支持保存激活状态、视图状态（拖动位置、缩放值）；支持节点拖拽。</p>
|
||||
<h2>0.1.14</h2>
|
||||
<p>修复：存在激活节点时设置主题存在的问题。</p>
|
||||
<h2>0.1.13</h2>
|
||||
<p>新增：快捷键功能；新增导出为json。</p>
|
||||
<p>优化：一些细节。</p>
|
||||
<h2>0.1.12</h2>
|
||||
<p>新增：本地存储；右键菜单功能等。</p>
|
||||
<h2>0.1.0</h2>
|
||||
<p>完成基本功能。</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
29
web/src/pages/Doc/zh/command/index.md
Normal file
29
web/src/pages/Doc/zh/command/index.md
Normal file
@ -0,0 +1,29 @@
|
||||
# Command实例
|
||||
|
||||
`command`实例负责命令的添加及执行，内置了很多命令，也可以自行添加，命令指需要在历史堆栈数据里添加副本的操作。可通过`mindMap.command`获取到该实例
|
||||
|
||||
## 方法
|
||||
|
||||
### add(name, fn)
|
||||
|
||||
添加命令。
|
||||
|
||||
`name`：命令名称
|
||||
|
||||
`fn`：命令要执行的方法
|
||||
|
||||
### remove(name, fn)
|
||||
|
||||
移除命令。
|
||||
|
||||
`name`：要移除的命令名称
|
||||
|
||||
`fn`：要移除的方法，不传的话移除该命令所有的方法
|
||||
|
||||
### getCopyData()
|
||||
|
||||
获取渲染树数据副本
|
||||
|
||||
### clearHistory()
|
||||
|
||||
清空历史堆栈数据
|
||||
30
web/src/pages/Doc/zh/command/index.vue
Normal file
30
web/src/pages/Doc/zh/command/index.vue
Normal file
@ -0,0 +1,30 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Command实例</h1>
|
||||
<p><code>command</code>实例负责命令的添加及执行，内置了很多命令，也可以自行添加，命令指需要在历史堆栈数据里添加副本的操作。可通过<code>mindMap.command</code>获取到该实例</p>
|
||||
<h2>方法</h2>
|
||||
<h3>add(name, fn)</h3>
|
||||
<p>添加命令。</p>
|
||||
<p><code>name</code>：命令名称</p>
|
||||
<p><code>fn</code>：命令要执行的方法</p>
|
||||
<h3>remove(name, fn)</h3>
|
||||
<p>移除命令。</p>
|
||||
<p><code>name</code>：要移除的命令名称</p>
|
||||
<p><code>fn</code>：要移除的方法，不传的话移除该命令所有的方法</p>
|
||||
<h3>getCopyData()</h3>
|
||||
<p>获取渲染树数据副本</p>
|
||||
<h3>clearHistory()</h3>
|
||||
<p>清空历史堆栈数据</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
272
web/src/pages/Doc/zh/constructor/index.md
Normal file
272
web/src/pages/Doc/zh/constructor/index.md
Normal file
@ -0,0 +1,272 @@
|
||||
# 构造函数
|
||||
|
||||
## 基本使用
|
||||
|
||||
```html
|
||||
<div id="mindMapContainer"></div>
|
||||
```
|
||||
|
||||
```js
|
||||
import MindMap from "simple-mind-map";
|
||||
|
||||
const mindMap = new MindMap({
|
||||
el: document.getElementById('mindMapContainer'),
|
||||
data: {
|
||||
"data": {
|
||||
"text": "根节点"
|
||||
},
|
||||
"children": []
|
||||
}
|
||||
});
|
||||
```
|
||||
|
||||
## Xmind解析方法
|
||||
|
||||
> v0.2.7+
|
||||
|
||||
可以通过如下方法获取解析`Xmind`文件的方法：
|
||||
|
||||
```js
|
||||
import MindMap from "simple-mind-map";
|
||||
|
||||
console.log(MindMap.xmind)
|
||||
```
|
||||
|
||||
`MindMap.xmind`对象上挂载了两个方法：
|
||||
|
||||
### parseXmindFile(file)
|
||||
|
||||
解析`.xmind`文件，返回解析后的数据，注意是完整的数据，包含节点树、主题、结构等，可以使用`mindMap.setFullData(data)`来将返回的数据渲染到画布上
|
||||
|
||||
`file`：`File`对象
|
||||
|
||||
### transformXmind(content)
|
||||
|
||||
转换`xmind`数据，`.xmind`文件本质上是一个压缩包，改成`zip`后缀可以解压缩，里面存在一个`content.json`文件，如果你自己解析出了这个文件，那么可以把这个文件内容传递给这个方法进行转换，转换后的数据，注意是完整的数据，包含节点树、主题、结构等，可以使用`mindMap.setFullData(data)`来将返回的数据渲染到画布上
|
||||
|
||||
`content`：`.xmind`压缩包内的`content.json`文件内容
|
||||
|
||||
### transformOldXmind(content)
|
||||
|
||||
> v0.2.8+
|
||||
|
||||
针对`xmind8`版本的数据解析，因为该版本的`.xmind`文件内没有`content.json`，对应的是`content.xml`。
|
||||
|
||||
`content`：`.xmind`压缩包内的`content.xml`文件内容
|
||||
|
||||
## 实例化选项
|
||||
|
||||
| 字段名称 | 类型 | 默认值 | 描述 | 是否必填 |
|
||||
| ------------------------------ | ------- | ---------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---- |
|
||||
| el | Element | | 容器元素，必须为DOM元素 | 是 |
|
||||
| data | Object | {} | 思维导图数据，可参考：[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js) | |
|
||||
| layout | String | logicalStructure | 布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图） | |
|
||||
| theme | String | default | 主题，可选列表：default（默认）、classic（脑图经典）、minions（小黄人）、pinkGrape（粉红葡萄）、mint（薄荷）、gold（金色vip）、vitalityOrange（活力橙）、greenLeaf（绿叶）、dark2（暗色2）、skyGreen（天清绿）、classic2（脑图经典2）、classic3（脑图经典3）、classic4（脑图经典4，v0.2.0+）、classicGreen（经典绿）、classicBlue（经典蓝）、blueSky（天空蓝）、brainImpairedPink（脑残粉）、dark（暗色）、earthYellow（泥土黄）、freshGreen（清新绿）、freshRed（清新红）、romanticPurple（浪漫紫） | |
|
||||
| themeConfig | Object | {} | 主题配置，会和所选择的主题进行合并，可用字段可参考：[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js) | |
|
||||
| scaleRatio | Number | 0.1 | 放大缩小的增量比例 | |
|
||||
| maxTag | Number | 5 | 节点里最多显示的标签数量，多余的会被丢弃 | |
|
||||
| exportPadding | Number | 20 | 导出图片时的内边距 | |
|
||||
| imgTextMargin | Number | 5 | 节点里图片和文字的间距 | |
|
||||
| textContentMargin | Number | 2 | 节点里各种文字信息的间距，如图标和文字的间距 | |
|
||||
| selectTranslateStep | Number | 3 | 多选节点时鼠标移动到边缘时的画布移动偏移量 | |
|
||||
| selectTranslateLimit | Number | 20 | 多选节点时鼠标移动距边缘多少距离时开始偏移 | |
|
||||
| customNoteContentShow（v0.1.6+） | Object | null | 自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) => {// 你的显示节点备注逻辑 }, hide: () => {// 你的隐藏节点备注逻辑 }} | |
|
||||
| readonly（v0.1.7+） | Boolean | false | 是否是只读模式 | |
|
||||
|
||||
## 静态方法
|
||||
|
||||
### defineTheme(name, config)
|
||||
|
||||
> v0.2.23+
|
||||
|
||||
定义新主题。
|
||||
|
||||
`name`：新主题名称
|
||||
|
||||
`config`：主题数据
|
||||
|
||||
`simple-mind-map`内置了众多主题，另外你也可以注册新主题，建议在实例化之前进行注册，这样在实例化时可以直接使用新注册的主题，使用示例：
|
||||
|
||||
```js
|
||||
import MindMap from 'simple-mind-map'
|
||||
// 注册新主题
|
||||
MindMap.defineTheme('主题名称', {})
|
||||
|
||||
// 1.实例化时使用新注册的主题
|
||||
const mindMap = new MindMap({
|
||||
theme: '主题名称'
|
||||
})
|
||||
|
||||
// 2.动态切换新主题
|
||||
mindMap.setTheme('主题名称')
|
||||
```
|
||||
|
||||
主题的所有配置可以参考[默认主题](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js)。`defineTheme`方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多，一个典型的自定义主题配置可以参考[blueSky](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js)。
|
||||
|
||||
|
||||
|
||||
## 实例方法
|
||||
|
||||
### render()
|
||||
|
||||
触发整体渲染，会进行节点复用，性能较`reRender`会更好一点，如果只是节点位置变化了可以调用该方法进行渲染
|
||||
|
||||
### reRender()
|
||||
|
||||
整体重新渲染，会清空画布，节点也会重新创建，性能不好，慎重使用
|
||||
|
||||
### resize()
|
||||
|
||||
容器尺寸变化后，需要调用该方法进行适应
|
||||
|
||||
### setMode(mode)
|
||||
|
||||
> v0.1.7+
|
||||
|
||||
切换模式为只读或编辑。
|
||||
|
||||
`mode`：readonly、edit
|
||||
|
||||
### on(event, fn)
|
||||
|
||||
监听事件，事件列表：
|
||||
|
||||
| 事件名称 | 描述 | 回调参数 |
|
||||
| -------------------------------- | ------------------------------------------ | ------------------------------------------------------------ |
|
||||
| data_change | 渲染树数据变化，可以监听该方法获取最新数据 | data（当前渲染树数据） |
|
||||
| view_data_change（v0.1.1+） | 视图变化数据，比如拖动或缩放时会触发 | data（当前视图状态数据） |
|
||||
| back_forward | 前进或回退 | activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度） |
|
||||
| draw_click | *画布的单击事件* | e（事件对象） |
|
||||
| svg_mousedown | svg画布的鼠标按下事件 | e（事件对象） |
|
||||
| mousedown | el元素的鼠标按下事件 | e（事件对象）、this（Event事件类实例） |
|
||||
| mousemove | el元素的鼠标移动事件 | e（事件对象）、this（Event事件类实例） |
|
||||
| drag | 如果是按住左键拖动的话会触发拖动事件 | e（事件对象）、this（Event事件类实例） |
|
||||
| mouseup | el元素的鼠标松开事件 | e（事件对象）、this（Event事件类实例） |
|
||||
| mousewheel | 鼠标滚动事件 | e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例） |
|
||||
| contextmenu | svg画布的鼠标右键菜单事件 | e（事件对象） |
|
||||
| node_click | 节点的单击事件 | this（节点实例）、e（事件对象） |
|
||||
| node_mousedown | 节点的鼠标按下事件 | this（节点实例）、e（事件对象） |
|
||||
| node_mouseup | 节点的鼠标松开事件 | this（节点实例）、e（事件对象） |
|
||||
| node_dblclick | 节点的双击事件 | this（节点实例）、e（事件对象） |
|
||||
| node_contextmenu | 节点的右键菜单事件 | e（事件对象）、this（节点实例） |
|
||||
| before_node_active | 节点激活前事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） |
|
||||
| node_active | 节点激活事件 | this（节点实例）、activeNodeList（当前激活的所有节点列表） |
|
||||
| expand_btn_click | 节点展开或收缩事件 | this（节点实例） |
|
||||
| before_show_text_edit | 节点文本编辑框即将打开事件 | |
|
||||
| hide_text_edit | 节点文本编辑框关闭事件 | textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表） |
|
||||
| scale | 放大缩小事件 | scale（缩放比例） |
|
||||
| node_img_dblclick（v0.2.15+） | 节点内图片的双击事件 | this（节点实例）、e（事件对象） |
|
||||
| node_tree_render_end（v0.2.16+） | 节点树渲染完毕事件 | |
|
||||
|
||||
### emit(event, ...args)
|
||||
|
||||
触发事件，可以是上面表格里的事件，也可以是自定义事件
|
||||
|
||||
### off(event, fn)
|
||||
|
||||
解绑事件
|
||||
|
||||
### setTheme(theme)
|
||||
|
||||
切换主题，可选主题见上面的选项表格
|
||||
|
||||
### getTheme()
|
||||
|
||||
获取当前主题
|
||||
|
||||
### setThemeConfig(config)
|
||||
|
||||
设置主题配置，`config`同上面选项表格里的选项`themeConfig`
|
||||
|
||||
### getCustomThemeConfig()
|
||||
|
||||
获取自定义主题配置
|
||||
|
||||
### getThemeConfig(prop)
|
||||
|
||||
获取某个主题配置属性值
|
||||
|
||||
### getLayout()
|
||||
|
||||
获取当前的布局结构
|
||||
|
||||
### setLayout(layout)
|
||||
|
||||
设置布局结构，可选值见上面选项表格的`layout`字段
|
||||
|
||||
### execCommand(name, ...args)
|
||||
|
||||
执行命令，每执行一个命令就会在历史堆栈里添加一条记录用于回退或前进。所有命令如下：
|
||||
|
||||
| 命令名称 | 描述 | 参数 |
|
||||
| --------------------------------- | -------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
|
||||
| SELECT_ALL | 全选 | |
|
||||
| BACK | 回退指定的步数 | step（要回退的步数，默认为1） |
|
||||
| FORWARD | 前进指定的步数 | step（要前进的步数，默认为1） |
|
||||
| INSERT_NODE | 插入同级节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效 | |
|
||||
| INSERT_CHILD_NODE | 插入子节点，操作节点为当前激活的节点 | |
|
||||
| UP_NODE | 上移节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的第一个节点使用无效 | |
|
||||
| DOWN_NODE | 操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的最后一个节点使用无效 | |
|
||||
| REMOVE_NODE | 删除节点，操作节点为当前激活的节点 | |
|
||||
| PASTE_NODE | 粘贴节点到节点，操作节点为当前激活的节点 | data（要粘贴的节点数据，一般通过`renderer.copyNode()`方法和`renderer.cutNode()`方法获取） |
|
||||
| CUT_NODE | 剪切节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点使用无效 | callback(回调函数，剪切的节点数据会通过调用该函数并通过参数返回) |
|
||||
| SET_NODE_STYLE | 修改节点样式 | node（要设置样式的节点）、prop（样式属性）、value（样式属性值）、isActive（布尔值，是否设置的是激活状态的样式） |
|
||||
| SET_NODE_ACTIVE | 设置节点是否激活 | node（要设置的节点）、active（布尔值，是否激活） |
|
||||
| CLEAR_ACTIVE_NODE | 清除当前已激活节点的激活状态，操作节点为当前激活的节点 | |
|
||||
| SET_NODE_EXPAND | 设置节点是否展开 | node（要设置的节点）、expand（布尔值，是否展开） |
|
||||
| EXPAND_ALL | 展开所有节点 | |
|
||||
| UNEXPAND_ALL | 收起所有节点 | |
|
||||
| UNEXPAND_TO_LEVEL（v0.2.8+） | 展开到指定层级 | level（要展开到的层级，1、2、3...） |
|
||||
| SET_NODE_DATA | 更新节点数据，即更新节点数据对象里`data`对象的数据 | node（要设置的节点）、data（对象，要更新的数据，如`{expand: true}`） |
|
||||
| SET_NODE_TEXT | 设置节点文本 | node（要设置的节点）、text（要设置的文本字符串，换行可以使用`\n`） |
|
||||
| SET_NODE_IMAGE | 设置节点图片 | node（要设置的节点）、imgData（对象，图片信息，结构为：`{url, title, width, height}`，图片的宽高必须要传） |
|
||||
| SET_NODE_ICON | 设置节点图标 | node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js)文件里的`nodeIconList`列表里获取到，图标名称为`type_name`，如`['priority_1']`） |
|
||||
| SET_NODE_HYPERLINK | 设置节点超链接 | node（要设置的节点）、link（超链接地址）、title（超链接名称，可选） |
|
||||
| SET_NODE_NOTE | 设置节点备注 | node（要设置的节点）、note（备注文字） |
|
||||
| SET_NODE_TAG | 设置节点标签 | node（要设置的节点）、tag（字符串数组，内置颜色信息可在[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js)里获取到） |
|
||||
| INSERT_AFTER（v0.1.5+） | 将节点移动到另一个节点的后面 | node（要移动的节点）、 exist（目标节点） |
|
||||
| INSERT_BEFORE（v0.1.5+） | 将节点移动到另一个节点的前面 | node（要移动的节点）、 exist（目标节点） |
|
||||
| MOVE_NODE_TO（v0.1.5+） | 移动一个节点作为另一个节点的子节点 | node（要移动的节点）、 toNode（目标节点） |
|
||||
| ADD_GENERALIZATION（v0.2.0+） | 添加节点概要 | data（概要的数据，对象格式，节点的数字段都支持，默认为{text: '概要'}） |
|
||||
| REMOVE_GENERALIZATION（v0.2.0+） | 删除节点概要 | |
|
||||
| SET_NODE_CUSTOM_POSITION（v0.2.0+） | 设置节点自定义位置 | node（要设置的节点）、 left（自定义的x坐标，默认为undefined）、 top（自定义的y坐标，默认为undefined） |
|
||||
| RESET_LAYOUT（v0.2.0+） | 一键整理布局 | |
|
||||
| SET_NODE_SHAPE（v0.2.4+） | 设置节点形状 | node（要设置的节点）、shape（形状，全部形状：https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/Shape.js） |
|
||||
|
||||
### setData(data)
|
||||
|
||||
动态设置思维导图数据，纯节点数据
|
||||
|
||||
`data`：思维导图结构数据
|
||||
|
||||
### setFullData(*data*)
|
||||
|
||||
> v0.2.7+
|
||||
|
||||
动态设置思维导图数据，包括节点数据、布局、主题、视图
|
||||
|
||||
`data`：完整数据，结构可参考[exportFullData](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exportFullData.json)
|
||||
|
||||
### getData(withConfig)
|
||||
|
||||
> v0.2.9+
|
||||
|
||||
获取思维导图数据
|
||||
|
||||
`withConfig`：`Boolean`，默认为`false`，即获取的数据只包括节点树，如果传`true`则会包含主题、布局、视图等数据
|
||||
|
||||
### export(type, isDownload, fileName)
|
||||
|
||||
导出
|
||||
|
||||
`type`：要导出的类型，可选值：png、svg、json、pdf（v0.2.1+）、smm（本质也是json）
|
||||
|
||||
`isDownload`：是否需要直接触发下载，布尔值，默认为`false`
|
||||
|
||||
`fileName`：（v0.1.6+）导出文件的名称，默认为`思维导图`
|
||||
|
||||
### toPos(x, y)
|
||||
|
||||
> v0.1.5+
|
||||
|
||||
将浏览器可视窗口的坐标转换成相对于画布的坐标
|
||||
549
web/src/pages/Doc/zh/constructor/index.vue
Normal file
549
web/src/pages/Doc/zh/constructor/index.vue
Normal file
@ -0,0 +1,549 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>构造函数</h1>
|
||||
<h2>基本使用</h2>
|
||||
<pre class="hljs"><code><span class="hljs-tag"><<span class="hljs-name">div</span> <span class="hljs-attr">id</span>=<span class="hljs-string">"mindMapContainer"</span>></span><span class="hljs-tag"></<span class="hljs-name">div</span>></span>
|
||||
</code></pre>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">"simple-mind-map"</span>;
|
||||
|
||||
<span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
|
||||
<span class="hljs-attr">el</span>: <span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'mindMapContainer'</span>),
|
||||
<span class="hljs-attr">data</span>: {
|
||||
<span class="hljs-string">"data"</span>: {
|
||||
<span class="hljs-string">"text"</span>: <span class="hljs-string">"根节点"</span>
|
||||
},
|
||||
<span class="hljs-string">"children"</span>: []
|
||||
}
|
||||
});
|
||||
</code></pre>
|
||||
<h2>Xmind解析方法</h2>
|
||||
<blockquote>
|
||||
<p>v0.2.7+</p>
|
||||
</blockquote>
|
||||
<p>可以通过如下方法获取解析<code>Xmind</code>文件的方法：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">"simple-mind-map"</span>;
|
||||
|
||||
<span class="hljs-built_in">console</span>.log(MindMap.xmind)
|
||||
</code></pre>
|
||||
<p><code>MindMap.xmind</code>对象上挂载了两个方法：</p>
|
||||
<h3>parseXmindFile(file)</h3>
|
||||
<p>解析<code>.xmind</code>文件，返回解析后的数据，注意是完整的数据，包含节点树、主题、结构等，可以使用<code>mindMap.setFullData(data)</code>来将返回的数据渲染到画布上</p>
|
||||
<p><code>file</code>：<code>File</code>对象</p>
|
||||
<h3>transformXmind(content)</h3>
|
||||
<p>转换<code>xmind</code>数据，<code>.xmind</code>文件本质上是一个压缩包，改成<code>zip</code>后缀可以解压缩，里面存在一个<code>content.json</code>文件，如果你自己解析出了这个文件，那么可以把这个文件内容传递给这个方法进行转换，转换后的数据，注意是完整的数据，包含节点树、主题、结构等，可以使用<code>mindMap.setFullData(data)</code>来将返回的数据渲染到画布上</p>
|
||||
<p><code>content</code>：<code>.xmind</code>压缩包内的<code>content.json</code>文件内容</p>
|
||||
<h3>transformOldXmind(content)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.8+</p>
|
||||
</blockquote>
|
||||
<p>针对<code>xmind8</code>版本的数据解析，因为该版本的<code>.xmind</code>文件内没有<code>content.json</code>，对应的是<code>content.xml</code>。</p>
|
||||
<p><code>content</code>：<code>.xmind</code>压缩包内的<code>content.xml</code>文件内容</p>
|
||||
<h2>实例化选项</h2>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>字段名称</th>
|
||||
<th>类型</th>
|
||||
<th>默认值</th>
|
||||
<th>描述</th>
|
||||
<th>是否必填</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>el</td>
|
||||
<td>Element</td>
|
||||
<td></td>
|
||||
<td>容器元素，必须为DOM元素</td>
|
||||
<td>是</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>data</td>
|
||||
<td>Object</td>
|
||||
<td>{}</td>
|
||||
<td>思维导图数据，可参考：<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js">https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exampleData.js</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>layout</td>
|
||||
<td>String</td>
|
||||
<td>logicalStructure</td>
|
||||
<td>布局类型，可选列表：logicalStructure（逻辑结构图）、mindMap（思维导图）、catalogOrganization（目录组织图）、organizationStructure（组织结构图）</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>theme</td>
|
||||
<td>String</td>
|
||||
<td>default</td>
|
||||
<td>主题，可选列表：default（默认）、classic（脑图经典）、minions（小黄人）、pinkGrape（粉红葡萄）、mint（薄荷）、gold（金色vip）、vitalityOrange（活力橙）、greenLeaf（绿叶）、dark2（暗色2）、skyGreen（天清绿）、classic2（脑图经典2）、classic3（脑图经典3）、classic4（脑图经典4，v0.2.0+）、classicGreen（经典绿）、classicBlue（经典蓝）、blueSky（天空蓝）、brainImpairedPink（脑残粉）、dark（暗色）、earthYellow（泥土黄）、freshGreen（清新绿）、freshRed（清新红）、romanticPurple（浪漫紫）</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>themeConfig</td>
|
||||
<td>Object</td>
|
||||
<td>{}</td>
|
||||
<td>主题配置，会和所选择的主题进行合并，可用字段可参考：<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js</a></td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>scaleRatio</td>
|
||||
<td>Number</td>
|
||||
<td>0.1</td>
|
||||
<td>放大缩小的增量比例</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>maxTag</td>
|
||||
<td>Number</td>
|
||||
<td>5</td>
|
||||
<td>节点里最多显示的标签数量，多余的会被丢弃</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>exportPadding</td>
|
||||
<td>Number</td>
|
||||
<td>20</td>
|
||||
<td>导出图片时的内边距</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>imgTextMargin</td>
|
||||
<td>Number</td>
|
||||
<td>5</td>
|
||||
<td>节点里图片和文字的间距</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>textContentMargin</td>
|
||||
<td>Number</td>
|
||||
<td>2</td>
|
||||
<td>节点里各种文字信息的间距，如图标和文字的间距</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>selectTranslateStep</td>
|
||||
<td>Number</td>
|
||||
<td>3</td>
|
||||
<td>多选节点时鼠标移动到边缘时的画布移动偏移量</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>selectTranslateLimit</td>
|
||||
<td>Number</td>
|
||||
<td>20</td>
|
||||
<td>多选节点时鼠标移动距边缘多少距离时开始偏移</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>customNoteContentShow（v0.1.6+）</td>
|
||||
<td>Object</td>
|
||||
<td>null</td>
|
||||
<td>自定义节点备注内容显示，Object类型，结构为：{show: (noteContent, left, top) => {// 你的显示节点备注逻辑 }, hide: () => {// 你的隐藏节点备注逻辑 }}</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>readonly（v0.1.7+）</td>
|
||||
<td>Boolean</td>
|
||||
<td>false</td>
|
||||
<td>是否是只读模式</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h2>静态方法</h2>
|
||||
<h3>defineTheme(name, config)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.23+</p>
|
||||
</blockquote>
|
||||
<p>定义新主题。</p>
|
||||
<p><code>name</code>：新主题名称</p>
|
||||
<p><code>config</code>：主题数据</p>
|
||||
<p><code>simple-mind-map</code>内置了众多主题，另外你也可以注册新主题，建议在实例化之前进行注册，这样在实例化时可以直接使用新注册的主题，使用示例：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map'</span>
|
||||
<span class="hljs-comment">// 注册新主题</span>
|
||||
MindMap.defineTheme(<span class="hljs-string">'主题名称'</span>, {})
|
||||
|
||||
<span class="hljs-comment">// 1.实例化时使用新注册的主题</span>
|
||||
<span class="hljs-keyword">const</span> mindMap = <span class="hljs-keyword">new</span> MindMap({
|
||||
<span class="hljs-attr">theme</span>: <span class="hljs-string">'主题名称'</span>
|
||||
})
|
||||
|
||||
<span class="hljs-comment">// 2.动态切换新主题</span>
|
||||
mindMap.setTheme(<span class="hljs-string">'主题名称'</span>)
|
||||
</code></pre>
|
||||
<p>主题的所有配置可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/default.js">默认主题</a>。<code>defineTheme</code>方法会把你传入的配置和默认配置做合并。大部分主题其实需要自定义的部分不是很多，一个典型的自定义主题配置可以参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/themes/blueSky.js">blueSky</a>。</p>
|
||||
<h2>实例方法</h2>
|
||||
<h3>render()</h3>
|
||||
<p>触发整体渲染，会进行节点复用，性能较<code>reRender</code>会更好一点，如果只是节点位置变化了可以调用该方法进行渲染</p>
|
||||
<h3>reRender()</h3>
|
||||
<p>整体重新渲染，会清空画布，节点也会重新创建，性能不好，慎重使用</p>
|
||||
<h3>resize()</h3>
|
||||
<p>容器尺寸变化后，需要调用该方法进行适应</p>
|
||||
<h3>setMode(mode)</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.7+</p>
|
||||
</blockquote>
|
||||
<p>切换模式为只读或编辑。</p>
|
||||
<p><code>mode</code>：readonly、edit</p>
|
||||
<h3>on(event, fn)</h3>
|
||||
<p>监听事件，事件列表：</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>事件名称</th>
|
||||
<th>描述</th>
|
||||
<th>回调参数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>data_change</td>
|
||||
<td>渲染树数据变化，可以监听该方法获取最新数据</td>
|
||||
<td>data（当前渲染树数据）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>view_data_change（v0.1.1+）</td>
|
||||
<td>视图变化数据，比如拖动或缩放时会触发</td>
|
||||
<td>data（当前视图状态数据）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>back_forward</td>
|
||||
<td>前进或回退</td>
|
||||
<td>activeHistoryIndex（当前在历史数据数组里的索引）、length（当前历史数据数组的长度）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>draw_click</td>
|
||||
<td><em>画布的单击事件</em></td>
|
||||
<td>e（事件对象）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>svg_mousedown</td>
|
||||
<td>svg画布的鼠标按下事件</td>
|
||||
<td>e（事件对象）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mousedown</td>
|
||||
<td>el元素的鼠标按下事件</td>
|
||||
<td>e（事件对象）、this（Event事件类实例）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mousemove</td>
|
||||
<td>el元素的鼠标移动事件</td>
|
||||
<td>e（事件对象）、this（Event事件类实例）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>drag</td>
|
||||
<td>如果是按住左键拖动的话会触发拖动事件</td>
|
||||
<td>e（事件对象）、this（Event事件类实例）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mouseup</td>
|
||||
<td>el元素的鼠标松开事件</td>
|
||||
<td>e（事件对象）、this（Event事件类实例）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>mousewheel</td>
|
||||
<td>鼠标滚动事件</td>
|
||||
<td>e（事件对象）、dir（向上up还是向下down滚动）、this（Event事件类实例）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>contextmenu</td>
|
||||
<td>svg画布的鼠标右键菜单事件</td>
|
||||
<td>e（事件对象）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_click</td>
|
||||
<td>节点的单击事件</td>
|
||||
<td>this（节点实例）、e（事件对象）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_mousedown</td>
|
||||
<td>节点的鼠标按下事件</td>
|
||||
<td>this（节点实例）、e（事件对象）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_mouseup</td>
|
||||
<td>节点的鼠标松开事件</td>
|
||||
<td>this（节点实例）、e（事件对象）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_dblclick</td>
|
||||
<td>节点的双击事件</td>
|
||||
<td>this（节点实例）、e（事件对象）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_contextmenu</td>
|
||||
<td>节点的右键菜单事件</td>
|
||||
<td>e（事件对象）、this（节点实例）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>before_node_active</td>
|
||||
<td>节点激活前事件</td>
|
||||
<td>this（节点实例）、activeNodeList（当前激活的所有节点列表）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_active</td>
|
||||
<td>节点激活事件</td>
|
||||
<td>this（节点实例）、activeNodeList（当前激活的所有节点列表）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>expand_btn_click</td>
|
||||
<td>节点展开或收缩事件</td>
|
||||
<td>this（节点实例）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>before_show_text_edit</td>
|
||||
<td>节点文本编辑框即将打开事件</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>hide_text_edit</td>
|
||||
<td>节点文本编辑框关闭事件</td>
|
||||
<td>textEditNode（文本编辑框DOM节点）、activeNodeList（当前激活的所有节点列表）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>scale</td>
|
||||
<td>放大缩小事件</td>
|
||||
<td>scale（缩放比例）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_img_dblclick（v0.2.15+）</td>
|
||||
<td>节点内图片的双击事件</td>
|
||||
<td>this（节点实例）、e（事件对象）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>node_tree_render_end（v0.2.16+）</td>
|
||||
<td>节点树渲染完毕事件</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>emit(event, ...args)</h3>
|
||||
<p>触发事件，可以是上面表格里的事件，也可以是自定义事件</p>
|
||||
<h3>off(event, fn)</h3>
|
||||
<p>解绑事件</p>
|
||||
<h3>setTheme(theme)</h3>
|
||||
<p>切换主题，可选主题见上面的选项表格</p>
|
||||
<h3>getTheme()</h3>
|
||||
<p>获取当前主题</p>
|
||||
<h3>setThemeConfig(config)</h3>
|
||||
<p>设置主题配置，<code>config</code>同上面选项表格里的选项<code>themeConfig</code></p>
|
||||
<h3>getCustomThemeConfig()</h3>
|
||||
<p>获取自定义主题配置</p>
|
||||
<h3>getThemeConfig(prop)</h3>
|
||||
<p>获取某个主题配置属性值</p>
|
||||
<h3>getLayout()</h3>
|
||||
<p>获取当前的布局结构</p>
|
||||
<h3>setLayout(layout)</h3>
|
||||
<p>设置布局结构，可选值见上面选项表格的<code>layout</code>字段</p>
|
||||
<h3>execCommand(name, ...args)</h3>
|
||||
<p>执行命令，每执行一个命令就会在历史堆栈里添加一条记录用于回退或前进。所有命令如下：</p>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>命令名称</th>
|
||||
<th>描述</th>
|
||||
<th>参数</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>SELECT_ALL</td>
|
||||
<td>全选</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>BACK</td>
|
||||
<td>回退指定的步数</td>
|
||||
<td>step（要回退的步数，默认为1）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>FORWARD</td>
|
||||
<td>前进指定的步数</td>
|
||||
<td>step（要前进的步数，默认为1）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>INSERT_NODE</td>
|
||||
<td>插入同级节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>INSERT_CHILD_NODE</td>
|
||||
<td>插入子节点，操作节点为当前激活的节点</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>UP_NODE</td>
|
||||
<td>上移节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的第一个节点使用无效</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>DOWN_NODE</td>
|
||||
<td>操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点或在列表里的最后一个节点使用无效</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>REMOVE_NODE</td>
|
||||
<td>删除节点，操作节点为当前激活的节点</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>PASTE_NODE</td>
|
||||
<td>粘贴节点到节点，操作节点为当前激活的节点</td>
|
||||
<td>data（要粘贴的节点数据，一般通过<code>renderer.copyNode()</code>方法和<code>renderer.cutNode()</code>方法获取）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CUT_NODE</td>
|
||||
<td>剪切节点，操作节点为当前激活的节点，如果有多个激活节点，只会对第一个有效，对根节点使用无效</td>
|
||||
<td>callback(回调函数，剪切的节点数据会通过调用该函数并通过参数返回)</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_STYLE</td>
|
||||
<td>修改节点样式</td>
|
||||
<td>node（要设置样式的节点）、prop（样式属性）、value（样式属性值）、isActive（布尔值，是否设置的是激活状态的样式）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_ACTIVE</td>
|
||||
<td>设置节点是否激活</td>
|
||||
<td>node（要设置的节点）、active（布尔值，是否激活）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>CLEAR_ACTIVE_NODE</td>
|
||||
<td>清除当前已激活节点的激活状态，操作节点为当前激活的节点</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_EXPAND</td>
|
||||
<td>设置节点是否展开</td>
|
||||
<td>node（要设置的节点）、expand（布尔值，是否展开）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>EXPAND_ALL</td>
|
||||
<td>展开所有节点</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>UNEXPAND_ALL</td>
|
||||
<td>收起所有节点</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>UNEXPAND_TO_LEVEL（v0.2.8+）</td>
|
||||
<td>展开到指定层级</td>
|
||||
<td>level（要展开到的层级，1、2、3...）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_DATA</td>
|
||||
<td>更新节点数据，即更新节点数据对象里<code>data</code>对象的数据</td>
|
||||
<td>node（要设置的节点）、data（对象，要更新的数据，如<code>{expand: true}</code>）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_TEXT</td>
|
||||
<td>设置节点文本</td>
|
||||
<td>node（要设置的节点）、text（要设置的文本字符串，换行可以使用<code>\n</code>）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_IMAGE</td>
|
||||
<td>设置节点图片</td>
|
||||
<td>node（要设置的节点）、imgData（对象，图片信息，结构为：<code>{url, title, width, height}</code>，图片的宽高必须要传）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_ICON</td>
|
||||
<td>设置节点图标</td>
|
||||
<td>node（要设置的节点）、icons（数组，预定义的图片名称组成的数组，可用图标可在<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js">https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/svg/icons.js</a>文件里的<code>nodeIconList</code>列表里获取到，图标名称为<code>type_name</code>，如<code>['priority_1']</code>）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_HYPERLINK</td>
|
||||
<td>设置节点超链接</td>
|
||||
<td>node（要设置的节点）、link（超链接地址）、title（超链接名称，可选）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_NOTE</td>
|
||||
<td>设置节点备注</td>
|
||||
<td>node（要设置的节点）、note（备注文字）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_TAG</td>
|
||||
<td>设置节点标签</td>
|
||||
<td>node（要设置的节点）、tag（字符串数组，内置颜色信息可在<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js">https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/constant.js</a>里获取到）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>INSERT_AFTER（v0.1.5+）</td>
|
||||
<td>将节点移动到另一个节点的后面</td>
|
||||
<td>node（要移动的节点）、 exist（目标节点）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>INSERT_BEFORE（v0.1.5+）</td>
|
||||
<td>将节点移动到另一个节点的前面</td>
|
||||
<td>node（要移动的节点）、 exist（目标节点）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>MOVE_NODE_TO（v0.1.5+）</td>
|
||||
<td>移动一个节点作为另一个节点的子节点</td>
|
||||
<td>node（要移动的节点）、 toNode（目标节点）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>ADD_GENERALIZATION（v0.2.0+）</td>
|
||||
<td>添加节点概要</td>
|
||||
<td>data（概要的数据，对象格式，节点的数字段都支持，默认为{text: '概要'}）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>REMOVE_GENERALIZATION（v0.2.0+）</td>
|
||||
<td>删除节点概要</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_CUSTOM_POSITION（v0.2.0+）</td>
|
||||
<td>设置节点自定义位置</td>
|
||||
<td>node（要设置的节点）、 left（自定义的x坐标，默认为undefined）、 top（自定义的y坐标，默认为undefined）</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>RESET_LAYOUT（v0.2.0+）</td>
|
||||
<td>一键整理布局</td>
|
||||
<td></td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>SET_NODE_SHAPE（v0.2.4+）</td>
|
||||
<td>设置节点形状</td>
|
||||
<td>node（要设置的节点）、shape（形状，全部形状：https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/Shape.js）</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
<h3>setData(data)</h3>
|
||||
<p>动态设置思维导图数据，纯节点数据</p>
|
||||
<p><code>data</code>：思维导图结构数据</p>
|
||||
<h3>setFullData(<em>data</em>)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.7+</p>
|
||||
</blockquote>
|
||||
<p>动态设置思维导图数据，包括节点数据、布局、主题、视图</p>
|
||||
<p><code>data</code>：完整数据，结构可参考<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/example/exportFullData.json">exportFullData</a></p>
|
||||
<h3>getData(withConfig)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.9+</p>
|
||||
</blockquote>
|
||||
<p>获取思维导图数据</p>
|
||||
<p><code>withConfig</code>：<code>Boolean</code>，默认为<code>false</code>，即获取的数据只包括节点树，如果传<code>true</code>则会包含主题、布局、视图等数据</p>
|
||||
<h3>export(type, isDownload, fileName)</h3>
|
||||
<p>导出</p>
|
||||
<p><code>type</code>：要导出的类型，可选值：png、svg、json、pdf（v0.2.1+）、smm（本质也是json）</p>
|
||||
<p><code>isDownload</code>：是否需要直接触发下载，布尔值，默认为<code>false</code></p>
|
||||
<p><code>fileName</code>：（v0.1.6+）导出文件的名称，默认为<code>思维导图</code></p>
|
||||
<h3>toPos(x, y)</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
</blockquote>
|
||||
<p>将浏览器可视窗口的坐标转换成相对于画布的坐标</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
40
web/src/pages/Doc/zh/doExport/index.md
Normal file
40
web/src/pages/Doc/zh/doExport/index.md
Normal file
@ -0,0 +1,40 @@
|
||||
# DoExport实例
|
||||
|
||||
`doExport`实例负责导出，可通过`mindMap.doExport`获取到该实例
|
||||
|
||||
## 方法
|
||||
|
||||
### png()
|
||||
|
||||
导出为`png`，异步方法，返回图片数据，`data:url`数据，可以自行下载或显示
|
||||
|
||||
### svg()
|
||||
|
||||
导出为`svg`，异步方法，返回`svg`数据，`data:url`数据，可以自行下载或显示
|
||||
|
||||
### getSvgData()
|
||||
|
||||
获取`svg`数据，异步方法，返回一个对象：
|
||||
|
||||
```js
|
||||
{
|
||||
node// svg对象
|
||||
str// svg字符串
|
||||
}
|
||||
```
|
||||
|
||||
### pdf(name)
|
||||
|
||||
> v0.2.1+
|
||||
|
||||
`name`：文件名称
|
||||
|
||||
导出为`pdf`
|
||||
|
||||
### json(name, withConfig)
|
||||
|
||||
`name`：暂时没有用处，传空字符串即可
|
||||
|
||||
`withConfig``：Boolean`, 默认为`true`，数据中是否包含配置，否则为纯思维导图节点数据
|
||||
|
||||
返回`json`数据，`data:url`数据，可以自行下载
|
||||
39
web/src/pages/Doc/zh/doExport/index.vue
Normal file
39
web/src/pages/Doc/zh/doExport/index.vue
Normal file
@ -0,0 +1,39 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>DoExport实例</h1>
|
||||
<p><code>doExport</code>实例负责导出，可通过<code>mindMap.doExport</code>获取到该实例</p>
|
||||
<h2>方法</h2>
|
||||
<h3>png()</h3>
|
||||
<p>导出为<code>png</code>，异步方法，返回图片数据，<code>data:url</code>数据，可以自行下载或显示</p>
|
||||
<h3>svg()</h3>
|
||||
<p>导出为<code>svg</code>，异步方法，返回<code>svg</code>数据，<code>data:url</code>数据，可以自行下载或显示</p>
|
||||
<h3>getSvgData()</h3>
|
||||
<p>获取<code>svg</code>数据，异步方法，返回一个对象：</p>
|
||||
<pre class="hljs"><code>{
|
||||
node<span class="hljs-comment">// svg对象</span>
|
||||
str<span class="hljs-comment">// svg字符串</span>
|
||||
}
|
||||
</code></pre>
|
||||
<h3>pdf(name)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.1+</p>
|
||||
</blockquote>
|
||||
<p><code>name</code>：文件名称</p>
|
||||
<p>导出为<code>pdf</code></p>
|
||||
<h3>json(name, withConfig)</h3>
|
||||
<p><code>name</code>：暂时没有用处，传空字符串即可</p>
|
||||
<p><code>withConfig``：Boolean</code>, 默认为<code>true</code>，数据中是否包含配置，否则为纯思维导图节点数据</p>
|
||||
<p>返回<code>json</code>数据，<code>data:url</code>数据，可以自行下载</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
67
web/src/pages/Doc/zh/introduction/index.md
Normal file
67
web/src/pages/Doc/zh/introduction/index.md
Normal file
@ -0,0 +1,67 @@
|
||||
# 简介
|
||||
|
||||
`simple-mind-map`是一个简单&强大的Web思维导图库，不依赖任何特定框架。
|
||||
|
||||
## 特性
|
||||
|
||||
- [x] 支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构
|
||||
- [x] 内置多种主题，允许高度自定义样式，支持注册新主题
|
||||
- [x] 支持快捷键
|
||||
- [x] 节点内容支持图片、图标、超链接、备注、标签、概要
|
||||
- [x] 支持前进后退
|
||||
- [x] 支持拖动、缩放
|
||||
- [x] 支持右键和Ctrl+左键两种多选方式
|
||||
- [x] 支持节点自由拖拽、拖拽调整
|
||||
- [x] 支持多种节点形状
|
||||
- [x] 支持导出为`json`、`png`、`svg`、`pdf`，支持从`json`、`xmind`导入
|
||||
- [x] 支持小地图
|
||||
|
||||
## 目录介绍
|
||||
|
||||
1.`simple-mind-map`
|
||||
|
||||
思维导图工具库，框架无关，`Vue`、`React`等框架或无框架都可以使用。
|
||||
|
||||
2.`web`
|
||||
|
||||
使用`simple-mind-map`工具库，基于`vue2.x`、`ElementUI`搭建的在线思维导图。特性：
|
||||
|
||||
- [x] 工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要
|
||||
|
||||
- [x] 侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板
|
||||
|
||||
- [x] 导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件
|
||||
|
||||
- [x] 右键菜单，支持展开、收起、整理布局等操作
|
||||
|
||||
- [x] 底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图
|
||||
|
||||
3.`dist`
|
||||
|
||||
打包`web`后的资源文件夹。
|
||||
|
||||
4.`docs`
|
||||
|
||||
文档等。
|
||||
|
||||
## 相关文章
|
||||
|
||||
[Web思维导图实现的技术点分析](https://juejin.cn/post/6987711560521089061)
|
||||
|
||||
[只需百来行代码，为你的Web页面增加本地文件操作能力，确定不试试吗？](https://juejin.cn/post/7157681502506090510)
|
||||
|
||||
## 特别说明
|
||||
|
||||
本项目较粗糙，未进行完整测试，功能尚不是很完善，性能也存在一些问题，仅用于学习和参考，请勿用于实际项目。
|
||||
|
||||
项目内置的主题和图标来自于：
|
||||
|
||||
[百度脑图](https://naotu.baidu.com/)
|
||||
|
||||
[知犀思维导图](https://www.zhixi.com/)
|
||||
|
||||
尊重版权，主题和图标请勿直接用于商业项目。
|
||||
|
||||
## License
|
||||
|
||||
[MIT](https://opensource.org/licenses/MIT)
|
||||
68
web/src/pages/Doc/zh/introduction/index.vue
Normal file
68
web/src/pages/Doc/zh/introduction/index.vue
Normal file
@ -0,0 +1,68 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>简介</h1>
|
||||
<p><code>simple-mind-map</code>是一个简单&强大的Web思维导图库，不依赖任何特定框架。</p>
|
||||
<h2>特性</h2>
|
||||
<ul>
|
||||
<li><input type="checkbox" id="checkbox0" checked="true"><label for="checkbox0">支持逻辑结构图、思维导图、组织结构图、目录组织图四种结构</label></li>
|
||||
<li><input type="checkbox" id="checkbox1" checked="true"><label for="checkbox1">内置多种主题，允许高度自定义样式，支持注册新主题</label></li>
|
||||
<li><input type="checkbox" id="checkbox2" checked="true"><label for="checkbox2">支持快捷键</label></li>
|
||||
<li><input type="checkbox" id="checkbox3" checked="true"><label for="checkbox3">节点内容支持图片、图标、超链接、备注、标签、概要</label></li>
|
||||
<li><input type="checkbox" id="checkbox4" checked="true"><label for="checkbox4">支持前进后退</label></li>
|
||||
<li><input type="checkbox" id="checkbox5" checked="true"><label for="checkbox5">支持拖动、缩放</label></li>
|
||||
<li><input type="checkbox" id="checkbox6" checked="true"><label for="checkbox6">支持右键和Ctrl+左键两种多选方式</label></li>
|
||||
<li><input type="checkbox" id="checkbox7" checked="true"><label for="checkbox7">支持节点自由拖拽、拖拽调整</label></li>
|
||||
<li><input type="checkbox" id="checkbox8" checked="true"><label for="checkbox8">支持多种节点形状</label></li>
|
||||
<li><input type="checkbox" id="checkbox9" checked="true"><label for="checkbox9">支持导出为</label><code>json</code>、<code>png</code>、<code>svg</code>、<code>pdf</code>，支持从<code>json</code>、<code>xmind</code>导入</li>
|
||||
<li><input type="checkbox" id="checkbox10" checked="true"><label for="checkbox10">支持小地图</label></li>
|
||||
</ul>
|
||||
<h2>目录介绍</h2>
|
||||
<p>1.<code>simple-mind-map</code></p>
|
||||
<p>思维导图工具库，框架无关，<code>Vue</code>、<code>React</code>等框架或无框架都可以使用。</p>
|
||||
<p>2.<code>web</code></p>
|
||||
<p>使用<code>simple-mind-map</code>工具库，基于<code>vue2.x</code>、<code>ElementUI</code>搭建的在线思维导图。特性：</p>
|
||||
<ul>
|
||||
<li>
|
||||
<p><input type="checkbox" id="checkbox11" checked="true"><label for="checkbox11">工具栏，支持插入节点、删除节点；编辑节点图片、图标、超链接、备注、标签、概要</label></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><input type="checkbox" id="checkbox12" checked="true"><label for="checkbox12">侧边栏，基础样式设置面板、节点样式设置面板、大纲面板、主题选择面板、结构选择面板</label></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><input type="checkbox" id="checkbox13" checked="true"><label for="checkbox13">导入导出功能；数据默认保存在浏览器本地存储，也支持直接创建、打开、编辑电脑本地文件</label></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><input type="checkbox" id="checkbox14" checked="true"><label for="checkbox14">右键菜单，支持展开、收起、整理布局等操作</label></p>
|
||||
</li>
|
||||
<li>
|
||||
<p><input type="checkbox" id="checkbox15" checked="true"><label for="checkbox15">底部栏，支持节点数量、字数统计；支持切换编辑和只读模式；支持放大缩小；支持全屏切换；支持小地图</label></p>
|
||||
</li>
|
||||
</ul>
|
||||
<p>3.<code>dist</code></p>
|
||||
<p>打包<code>web</code>后的资源文件夹。</p>
|
||||
<p>4.<code>docs</code></p>
|
||||
<p>文档等。</p>
|
||||
<h2>相关文章</h2>
|
||||
<p><a href="https://juejin.cn/post/6987711560521089061">Web思维导图实现的技术点分析</a></p>
|
||||
<p><a href="https://juejin.cn/post/7157681502506090510">只需百来行代码，为你的Web页面增加本地文件操作能力，确定不试试吗？</a></p>
|
||||
<h2>特别说明</h2>
|
||||
<p>本项目较粗糙，未进行完整测试，功能尚不是很完善，性能也存在一些问题，仅用于学习和参考，请勿用于实际项目。</p>
|
||||
<p>项目内置的主题和图标来自于：</p>
|
||||
<p><a href="https://naotu.baidu.com/">百度脑图</a></p>
|
||||
<p><a href="https://www.zhixi.com/">知犀思维导图</a></p>
|
||||
<p>尊重版权，主题和图标请勿直接用于商业项目。</p>
|
||||
<h2>License</h2>
|
||||
<p><a href="https://opensource.org/licenses/MIT">MIT</a></p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
56
web/src/pages/Doc/zh/keyCommand/index.md
Normal file
56
web/src/pages/Doc/zh/keyCommand/index.md
Normal file
@ -0,0 +1,56 @@
|
||||
# KeyCommand实例
|
||||
|
||||
`keyCommand`实例负责快捷键的添加及触发，内置了一些快捷键，也可以自行添加。可通过`mindMap.keyCommand`获取到该实例。
|
||||
|
||||
## 方法
|
||||
|
||||
### addShortcut(key, fn)
|
||||
|
||||
添加快捷键
|
||||
|
||||
`key`：快捷键按键，按键值可以通过[https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/keyMap.js](https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/keyMap.js)查看。示例：
|
||||
|
||||
```js
|
||||
// 单个按键
|
||||
mindMap.keyCommand.addShortcut('Enter', () => {})
|
||||
// 或
|
||||
mindMap.keyCommand.addShortcut('Del|Backspace', () => {})
|
||||
// 组合键
|
||||
mindMap.keyCommand.addShortcut('Control+Enter', () => {})
|
||||
```
|
||||
|
||||
`fn`：要执行的方法
|
||||
|
||||
### removeShortcut(key, fn)
|
||||
|
||||
移除快捷键命令，`fn`不指定则移除该快捷键的所有回调方法
|
||||
|
||||
### getShortcutFn(key)
|
||||
|
||||
> v0.2.2+
|
||||
|
||||
获取指定快捷键的处理函数
|
||||
|
||||
### pause()
|
||||
|
||||
> v0.2.2+
|
||||
|
||||
暂停所有快捷键响应
|
||||
|
||||
### recovery()
|
||||
|
||||
> v0.2.2+
|
||||
|
||||
恢复快捷键响应
|
||||
|
||||
### save()
|
||||
|
||||
> v0.2.3+
|
||||
|
||||
保存当前注册的快捷键数据，然后清空快捷键数据
|
||||
|
||||
### restore()
|
||||
|
||||
> v0.2.3+
|
||||
|
||||
恢复保存的快捷键数据，然后清空缓存数据
|
||||
56
web/src/pages/Doc/zh/keyCommand/index.vue
Normal file
56
web/src/pages/Doc/zh/keyCommand/index.vue
Normal file
@ -0,0 +1,56 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>KeyCommand实例</h1>
|
||||
<p><code>keyCommand</code>实例负责快捷键的添加及触发，内置了一些快捷键，也可以自行添加。可通过<code>mindMap.keyCommand</code>获取到该实例。</p>
|
||||
<h2>方法</h2>
|
||||
<h3>addShortcut(key, fn)</h3>
|
||||
<p>添加快捷键</p>
|
||||
<p><code>key</code>：快捷键按键，按键值可以通过<a href="https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/keyMap.js">https://github.com/wanglin2/mind-map/blob/main/simple-mind-map/src/utils/keyMap.js</a>查看。示例：</p>
|
||||
<pre class="hljs"><code><span class="hljs-comment">// 单个按键</span>
|
||||
mindMap.keyCommand.addShortcut(<span class="hljs-string">'Enter'</span>, <span class="hljs-function">() =></span> {})
|
||||
<span class="hljs-comment">// 或</span>
|
||||
mindMap.keyCommand.addShortcut(<span class="hljs-string">'Del|Backspace'</span>, <span class="hljs-function">() =></span> {})
|
||||
<span class="hljs-comment">// 组合键</span>
|
||||
mindMap.keyCommand.addShortcut(<span class="hljs-string">'Control+Enter'</span>, <span class="hljs-function">() =></span> {})
|
||||
</code></pre>
|
||||
<p><code>fn</code>：要执行的方法</p>
|
||||
<h3>removeShortcut(key, fn)</h3>
|
||||
<p>移除快捷键命令，<code>fn</code>不指定则移除该快捷键的所有回调方法</p>
|
||||
<h3>getShortcutFn(key)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.2+</p>
|
||||
</blockquote>
|
||||
<p>获取指定快捷键的处理函数</p>
|
||||
<h3>pause()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.2+</p>
|
||||
</blockquote>
|
||||
<p>暂停所有快捷键响应</p>
|
||||
<h3>recovery()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.2+</p>
|
||||
</blockquote>
|
||||
<p>恢复快捷键响应</p>
|
||||
<h3>save()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.3+</p>
|
||||
</blockquote>
|
||||
<p>保存当前注册的快捷键数据，然后清空快捷键数据</p>
|
||||
<h3>restore()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.3+</p>
|
||||
</blockquote>
|
||||
<p>恢复保存的快捷键数据，然后清空缓存数据</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
40
web/src/pages/Doc/zh/keyboardNavigation/index.md
Normal file
40
web/src/pages/Doc/zh/keyboardNavigation/index.md
Normal file
@ -0,0 +1,40 @@
|
||||
# KeyboardNavigation实例
|
||||
|
||||
> v0.2.17+
|
||||
|
||||
`KeyboardNavigation`实例负责处理键盘导航，也就是当你按下方向键时会自动寻找下一个节点并激活，可通过`mindMap.keyboardNavigation`获取到该实例
|
||||
|
||||
## 方法
|
||||
|
||||
### focus(dir)
|
||||
|
||||
`dir`：要寻找哪个方向的下一个节点，可选值：`Left`、 `Up`、 `Right`、 `Down`
|
||||
|
||||
聚焦到下一个节点
|
||||
|
||||
### getNodeRect(node)
|
||||
|
||||
`node`：节点
|
||||
|
||||
获取节点的位置信息，返回一个对象：
|
||||
|
||||
```js
|
||||
{
|
||||
left,
|
||||
top,
|
||||
right,
|
||||
bottom
|
||||
}
|
||||
```
|
||||
|
||||
### getDistance(node1Rect, node2Rect)
|
||||
|
||||
`node1Rect`、`node2Rect`：节点的位置数据，可通过`getNodeRect(node)`方法获取
|
||||
|
||||
获取两个节点的距离
|
||||
|
||||
### getCenter(nodeRect)
|
||||
|
||||
`nodeRect`：节点的位置数据，可通过`getNodeRect(node)`方法获取
|
||||
|
||||
获取节点的中心点
|
||||
40
web/src/pages/Doc/zh/keyboardNavigation/index.vue
Normal file
40
web/src/pages/Doc/zh/keyboardNavigation/index.vue
Normal file
@ -0,0 +1,40 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>KeyboardNavigation实例</h1>
|
||||
<blockquote>
|
||||
<p>v0.2.17+</p>
|
||||
</blockquote>
|
||||
<p><code>KeyboardNavigation</code>实例负责处理键盘导航，也就是当你按下方向键时会自动寻找下一个节点并激活，可通过<code>mindMap.keyboardNavigation</code>获取到该实例</p>
|
||||
<h2>方法</h2>
|
||||
<h3>focus(dir)</h3>
|
||||
<p><code>dir</code>：要寻找哪个方向的下一个节点，可选值：<code>Left</code>、 <code>Up</code>、 <code>Right</code>、 <code>Down</code></p>
|
||||
<p>聚焦到下一个节点</p>
|
||||
<h3>getNodeRect(node)</h3>
|
||||
<p><code>node</code>：节点</p>
|
||||
<p>获取节点的位置信息，返回一个对象：</p>
|
||||
<pre class="hljs"><code>{
|
||||
left,
|
||||
top,
|
||||
right,
|
||||
bottom
|
||||
}
|
||||
</code></pre>
|
||||
<h3>getDistance(node1Rect, node2Rect)</h3>
|
||||
<p><code>node1Rect</code>、<code>node2Rect</code>：节点的位置数据，可通过<code>getNodeRect(node)</code>方法获取</p>
|
||||
<p>获取两个节点的距离</p>
|
||||
<h3>getCenter(nodeRect)</h3>
|
||||
<p><code>nodeRect</code>：节点的位置数据，可通过<code>getNodeRect(node)</code>方法获取</p>
|
||||
<p>获取节点的中心点</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
87
web/src/pages/Doc/zh/miniMap/index.md
Normal file
87
web/src/pages/Doc/zh/miniMap/index.md
Normal file
@ -0,0 +1,87 @@
|
||||
# MiniMap实例
|
||||
|
||||
> v0.2.11+
|
||||
|
||||
用于帮助快速开发小地图功能，小地图由两部分组成，一个是当前的画布内容，一个是视口框，当缩放、移动、元素过多时画布上可能只显示了思维导图的部分内容，可以通过视口框来查看当前视口所在位置，以及可以通过在小地图上拖动来快速定位。
|
||||
|
||||
可通过`mindMap.miniMap`获取到该实例。
|
||||
|
||||
## 方法
|
||||
|
||||
### getMiniMap()
|
||||
|
||||
获取小地图相关数据，这个函数一般不会直接使用，函数返回的内容：
|
||||
|
||||
```js
|
||||
{
|
||||
svg, // Element，思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）
|
||||
svgHTML, // String，svg字符串，即html字符串，可以直接渲染到你准备的小地图容器内
|
||||
rect: // Object，思维导图图形未缩放时的位置尺寸等信息
|
||||
origWidth, // Number，画布宽度
|
||||
origHeight, // Number，画布高度
|
||||
scaleX, // Number，思维导图图形的水平缩放值
|
||||
scaleY, // Number，思维导图图形的垂直缩放值
|
||||
}
|
||||
```
|
||||
|
||||
### calculationMiniMap(boxWidth, boxHeight)
|
||||
|
||||
计算小地图的渲染数据，该函数内会调用`getMiniMap()`方法，所以一般使用该函数即可。
|
||||
|
||||
`boxWidth`：小地图容器的宽度
|
||||
|
||||
`boxHeight`：小地图容器的高度
|
||||
|
||||
函数返回内容：
|
||||
|
||||
```js
|
||||
{
|
||||
svgHTML, // 小地图html
|
||||
viewBoxStyle, // 视图框的位置信息
|
||||
miniMapBoxScale, // 视图框的缩放值
|
||||
miniMapBoxLeft, // 视图框的left值
|
||||
miniMapBoxTop, // 视图框的top值
|
||||
}
|
||||
```
|
||||
|
||||
小地图思路：
|
||||
|
||||
1.准备一个容器元素`container`，定位不为`static`
|
||||
|
||||
2.在`container`内创建一个小地图容器元素`miniMapContainer`，绝对定位
|
||||
|
||||
3.在`container`内创建一个视口框元素`viewBoxContainer`，绝对定位，设置边框样式，过渡属性（可选）
|
||||
|
||||
4.监听`data_change`和`view_data_change`事件，在该事件内调用`calculationMiniMap`方法获取计算数据，然后将`svgHTML`渲染到`miniMapContainer`元素内，并且设置它的样式：
|
||||
|
||||
```js
|
||||
:style="{
|
||||
transform: `scale(${svgBoxScale})`,
|
||||
left: svgBoxLeft + 'px',
|
||||
top: svgBoxTop + 'px',
|
||||
}"
|
||||
```
|
||||
|
||||
5.将`viewBoxStyle`对象设置为`viewBoxContainer`元素的样式
|
||||
|
||||
到这一步，当画布上的思维导图变化了，小地图也会实时更新，并且视口框元素会实时反映视口在思维导图图形上的位置
|
||||
|
||||
6.监听`container`元素的`mousedown`、`mousemove`、`mouseup`事件，分别调用下面即将介绍的三个方法即可实现鼠标拖动时画布上的思维导图也随之拖动的效果
|
||||
|
||||
### onMousedown(e)
|
||||
|
||||
小地图鼠标按下事件执行该函数
|
||||
|
||||
`e`：事件对象
|
||||
|
||||
### onMousemove(e, sensitivityNum = 5)
|
||||
|
||||
小地图鼠标移动事件执行该函数
|
||||
|
||||
`e`：事件对象
|
||||
|
||||
`sensitivityNum`：拖动灵敏度，灵敏度越大，在小地图上拖动相同距离时实际上的画布拖动距离就越大
|
||||
|
||||
### onMouseup()
|
||||
|
||||
小地图鼠标松开事件执行该函数
|
||||
70
web/src/pages/Doc/zh/miniMap/index.vue
Normal file
70
web/src/pages/Doc/zh/miniMap/index.vue
Normal file
@ -0,0 +1,70 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>MiniMap实例</h1>
|
||||
<blockquote>
|
||||
<p>v0.2.11+</p>
|
||||
</blockquote>
|
||||
<p>用于帮助快速开发小地图功能，小地图由两部分组成，一个是当前的画布内容，一个是视口框，当缩放、移动、元素过多时画布上可能只显示了思维导图的部分内容，可以通过视口框来查看当前视口所在位置，以及可以通过在小地图上拖动来快速定位。</p>
|
||||
<p>可通过<code>mindMap.miniMap</code>获取到该实例。</p>
|
||||
<h2>方法</h2>
|
||||
<h3>getMiniMap()</h3>
|
||||
<p>获取小地图相关数据，这个函数一般不会直接使用，函数返回的内容：</p>
|
||||
<pre class="hljs"><code>{
|
||||
svg, <span class="hljs-comment">// Element，思维导图图形的整体svg元素，包括：svg（画布容器）、g（实际的思维导图组）</span>
|
||||
svgHTML, <span class="hljs-comment">// String，svg字符串，即html字符串，可以直接渲染到你准备的小地图容器内</span>
|
||||
<span class="hljs-attr">rect</span>: <span class="hljs-comment">// Object，思维导图图形未缩放时的位置尺寸等信息</span>
|
||||
origWidth, <span class="hljs-comment">// Number，画布宽度</span>
|
||||
origHeight, <span class="hljs-comment">// Number，画布高度</span>
|
||||
scaleX, <span class="hljs-comment">// Number，思维导图图形的水平缩放值</span>
|
||||
scaleY, <span class="hljs-comment">// Number，思维导图图形的垂直缩放值</span>
|
||||
}
|
||||
</code></pre>
|
||||
<h3>calculationMiniMap(boxWidth, boxHeight)</h3>
|
||||
<p>计算小地图的渲染数据，该函数内会调用<code>getMiniMap()</code>方法，所以一般使用该函数即可。</p>
|
||||
<p><code>boxWidth</code>：小地图容器的宽度</p>
|
||||
<p><code>boxHeight</code>：小地图容器的高度</p>
|
||||
<p>函数返回内容：</p>
|
||||
<pre class="hljs"><code>{
|
||||
svgHTML, <span class="hljs-comment">// 小地图html</span>
|
||||
viewBoxStyle, <span class="hljs-comment">// 视图框的位置信息</span>
|
||||
miniMapBoxScale, <span class="hljs-comment">// 视图框的缩放值</span>
|
||||
miniMapBoxLeft, <span class="hljs-comment">// 视图框的left值</span>
|
||||
miniMapBoxTop, <span class="hljs-comment">// 视图框的top值</span>
|
||||
}
|
||||
</code></pre>
|
||||
<p>小地图思路：</p>
|
||||
<p>1.准备一个容器元素<code>container</code>，定位不为<code>static</code></p>
|
||||
<p>2.在<code>container</code>内创建一个小地图容器元素<code>miniMapContainer</code>，绝对定位</p>
|
||||
<p>3.在<code>container</code>内创建一个视口框元素<code>viewBoxContainer</code>，绝对定位，设置边框样式，过渡属性（可选）</p>
|
||||
<p>4.监听<code>data_change</code>和<code>view_data_change</code>事件，在该事件内调用<code>calculationMiniMap</code>方法获取计算数据，然后将<code>svgHTML</code>渲染到<code>miniMapContainer</code>元素内，并且设置它的样式：</p>
|
||||
<pre class="hljs"><code>:style=<span class="hljs-string">"{
|
||||
transform: `scale(${svgBoxScale})`,
|
||||
left: svgBoxLeft + 'px',
|
||||
top: svgBoxTop + 'px',
|
||||
}"</span>
|
||||
</code></pre>
|
||||
<p>5.将<code>viewBoxStyle</code>对象设置为<code>viewBoxContainer</code>元素的样式</p>
|
||||
<p>到这一步，当画布上的思维导图变化了，小地图也会实时更新，并且视口框元素会实时反映视口在思维导图图形上的位置</p>
|
||||
<p>6.监听<code>container</code>元素的<code>mousedown</code>、<code>mousemove</code>、<code>mouseup</code>事件，分别调用下面即将介绍的三个方法即可实现鼠标拖动时画布上的思维导图也随之拖动的效果</p>
|
||||
<h3>onMousedown(e)</h3>
|
||||
<p>小地图鼠标按下事件执行该函数</p>
|
||||
<p><code>e</code>：事件对象</p>
|
||||
<h3>onMousemove(e, sensitivityNum = 5)</h3>
|
||||
<p>小地图鼠标移动事件执行该函数</p>
|
||||
<p><code>e</code>：事件对象</p>
|
||||
<p><code>sensitivityNum</code>：拖动灵敏度，灵敏度越大，在小地图上拖动相同距离时实际上的画布拖动距离就越大</p>
|
||||
<h3>onMouseup()</h3>
|
||||
<p>小地图鼠标松开事件执行该函数</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
229
web/src/pages/Doc/zh/node/index.md
Normal file
229
web/src/pages/Doc/zh/node/index.md
Normal file
@ -0,0 +1,229 @@
|
||||
# Node实例
|
||||
|
||||
每个节点都会实例化一个`node`实例
|
||||
|
||||
## 属性
|
||||
|
||||
### nodeData
|
||||
|
||||
该节点对应的真实数据
|
||||
|
||||
### uid
|
||||
|
||||
该节点唯一的标识
|
||||
|
||||
### isRoot
|
||||
|
||||
是否是根节点
|
||||
|
||||
### layerIndex
|
||||
|
||||
节点层级
|
||||
|
||||
### width
|
||||
|
||||
节点的宽
|
||||
|
||||
### height
|
||||
|
||||
节点的高
|
||||
|
||||
### left
|
||||
|
||||
节点的`left`位置
|
||||
|
||||
### top
|
||||
|
||||
节点的`top`位置
|
||||
|
||||
### parent
|
||||
|
||||
节点的父节点
|
||||
|
||||
### children
|
||||
|
||||
节点的子节点列表
|
||||
|
||||
### group
|
||||
|
||||
节点是内容容器，`svg`对象
|
||||
|
||||
### isDrag
|
||||
|
||||
> v0.1.5+
|
||||
|
||||
节点是否正在拖拽中
|
||||
|
||||
## 方法
|
||||
|
||||
### addChildren(node)
|
||||
|
||||
添加子节点
|
||||
|
||||
### getSize()
|
||||
|
||||
计算节点的宽高，返回一个布尔值，代表是否宽高发生了变化
|
||||
|
||||
### renderNode()
|
||||
|
||||
渲染节点到画布，会移除旧的内容节点，创建新的
|
||||
|
||||
### render()
|
||||
|
||||
递归渲染该节点及其所有子节点，第一次调用会创建节点内容，后续只会更新节点位置，想要重新渲染内容，可以先把`initRender`属性设为`true`
|
||||
|
||||
### remove()
|
||||
|
||||
递归删除该节点及其所有子节点
|
||||
|
||||
### renderLine()
|
||||
|
||||
重新渲染该节点到其子节点之间的连线
|
||||
|
||||
### removeLine()
|
||||
|
||||
移除该节点到其子节点之间的连线
|
||||
|
||||
### renderExpandBtn()
|
||||
|
||||
渲染展开收缩按钮的内容
|
||||
|
||||
### removeExpandBtn()
|
||||
|
||||
移除展开收缩按钮
|
||||
|
||||
### getStyle(prop, root, isActive)
|
||||
|
||||
获取某个最终应用到该节点的样式值
|
||||
|
||||
`prop`：要获取的样式属性
|
||||
|
||||
`root`：是否是根节点，默认`false`
|
||||
|
||||
`isActive`：获取的是否是激活状态的样式值，默认`false`
|
||||
|
||||
### setStyle(prop, value, isActive)
|
||||
|
||||
修改节点的某个样式，`SET_NODE_STYLE`命令的快捷方法
|
||||
|
||||
### getData(key)
|
||||
|
||||
获取该节点真实数据`nodeData`的`data`对象里的指定值，`key`不传返回这个`data`对象
|
||||
|
||||
### setData(data)
|
||||
|
||||
设置节点数据，`SET_NODE_DATA`命令的快捷方法
|
||||
|
||||
### setText(text)
|
||||
|
||||
设置节点文本，`SET_NODE_TEXT`命令的快捷方法
|
||||
|
||||
### setImage(imgData)
|
||||
|
||||
设置节点图片，`SET_NODE_IMAGE`命令的快捷方法
|
||||
|
||||
### setIcon(icons)
|
||||
|
||||
设置节点图标，`SET_NODE_ICON`命令的快捷方法
|
||||
|
||||
### setHyperlink(link, title)
|
||||
|
||||
设置节点超链接，`SET_NODE_HYPERLINK`命令的快捷方法
|
||||
|
||||
### setNote(note)
|
||||
|
||||
设置节点备注，`SET_NODE_NOTE`命令的快捷方法
|
||||
|
||||
### setTag(tag)
|
||||
|
||||
设置节点标签，`SET_NODE_TAG`的快捷方法
|
||||
|
||||
### hide()
|
||||
|
||||
> v0.1.5+
|
||||
|
||||
隐藏节点及其下级节点
|
||||
|
||||
### show()
|
||||
|
||||
> v0.1.5+
|
||||
|
||||
显示节点及其下级节点
|
||||
|
||||
### isParent(node)
|
||||
|
||||
> v0.1.5+
|
||||
|
||||
检测当前节点是否是某个节点的祖先节点
|
||||
|
||||
### isBrother(node)
|
||||
|
||||
> v0.1.5+
|
||||
|
||||
检测当前节点是否是某个节点的兄弟节点
|
||||
|
||||
### checkHasGeneralization()
|
||||
|
||||
> v0.2.0+
|
||||
|
||||
检查是否存在概要
|
||||
|
||||
### hideGeneralization()
|
||||
|
||||
> v0.2.0+
|
||||
|
||||
隐藏概要节点
|
||||
|
||||
### showGeneralization()
|
||||
|
||||
> v0.2.0+
|
||||
|
||||
显示概要节点
|
||||
|
||||
### updateGeneralization()
|
||||
|
||||
> v0.2.0+
|
||||
|
||||
更新概要节点
|
||||
|
||||
### hasCustomPosition()
|
||||
|
||||
> v0.2.0+
|
||||
|
||||
检查节点是否存在自定义数据
|
||||
|
||||
### ancestorHasCustomPosition()
|
||||
|
||||
> v0.2.0+
|
||||
|
||||
检查节点是否存在自定义位置的祖先节点
|
||||
|
||||
### getShape()
|
||||
|
||||
> v0.2.4+
|
||||
|
||||
获取节点形状
|
||||
|
||||
### setShape(shape)
|
||||
|
||||
> v0.2.4+
|
||||
|
||||
设置节点形状，`SET_NODE_SHAPE`命令的快捷方法
|
||||
|
||||
### getSelfStyle(prop)
|
||||
|
||||
> v0.2.5+
|
||||
|
||||
获取节点自身的自定义样式
|
||||
|
||||
### getParentSelfStyle(prop)
|
||||
|
||||
> v0.2.5+
|
||||
|
||||
获取最近一个存在自身自定义样式的祖先节点的自定义样式
|
||||
|
||||
### getSelfInhertStyle(prop)
|
||||
|
||||
> v0.2.5+
|
||||
|
||||
获取自身可继承的自定义样式
|
||||
162
web/src/pages/Doc/zh/node/index.vue
Normal file
162
web/src/pages/Doc/zh/node/index.vue
Normal file
@ -0,0 +1,162 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Node实例</h1>
|
||||
<p>每个节点都会实例化一个<code>node</code>实例</p>
|
||||
<h2>属性</h2>
|
||||
<h3>nodeData</h3>
|
||||
<p>该节点对应的真实数据</p>
|
||||
<h3>uid</h3>
|
||||
<p>该节点唯一的标识</p>
|
||||
<h3>isRoot</h3>
|
||||
<p>是否是根节点</p>
|
||||
<h3>layerIndex</h3>
|
||||
<p>节点层级</p>
|
||||
<h3>width</h3>
|
||||
<p>节点的宽</p>
|
||||
<h3>height</h3>
|
||||
<p>节点的高</p>
|
||||
<h3>left</h3>
|
||||
<p>节点的<code>left</code>位置</p>
|
||||
<h3>top</h3>
|
||||
<p>节点的<code>top</code>位置</p>
|
||||
<h3>parent</h3>
|
||||
<p>节点的父节点</p>
|
||||
<h3>children</h3>
|
||||
<p>节点的子节点列表</p>
|
||||
<h3>group</h3>
|
||||
<p>节点是内容容器，<code>svg</code>对象</p>
|
||||
<h3>isDrag</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
</blockquote>
|
||||
<p>节点是否正在拖拽中</p>
|
||||
<h2>方法</h2>
|
||||
<h3>addChildren(node)</h3>
|
||||
<p>添加子节点</p>
|
||||
<h3>getSize()</h3>
|
||||
<p>计算节点的宽高，返回一个布尔值，代表是否宽高发生了变化</p>
|
||||
<h3>renderNode()</h3>
|
||||
<p>渲染节点到画布，会移除旧的内容节点，创建新的</p>
|
||||
<h3>render()</h3>
|
||||
<p>递归渲染该节点及其所有子节点，第一次调用会创建节点内容，后续只会更新节点位置，想要重新渲染内容，可以先把<code>initRender</code>属性设为<code>true</code></p>
|
||||
<h3>remove()</h3>
|
||||
<p>递归删除该节点及其所有子节点</p>
|
||||
<h3>renderLine()</h3>
|
||||
<p>重新渲染该节点到其子节点之间的连线</p>
|
||||
<h3>removeLine()</h3>
|
||||
<p>移除该节点到其子节点之间的连线</p>
|
||||
<h3>renderExpandBtn()</h3>
|
||||
<p>渲染展开收缩按钮的内容</p>
|
||||
<h3>removeExpandBtn()</h3>
|
||||
<p>移除展开收缩按钮</p>
|
||||
<h3>getStyle(prop, root, isActive)</h3>
|
||||
<p>获取某个最终应用到该节点的样式值</p>
|
||||
<p><code>prop</code>：要获取的样式属性</p>
|
||||
<p><code>root</code>：是否是根节点，默认<code>false</code></p>
|
||||
<p><code>isActive</code>：获取的是否是激活状态的样式值，默认<code>false</code></p>
|
||||
<h3>setStyle(prop, value, isActive)</h3>
|
||||
<p>修改节点的某个样式，<code>SET_NODE_STYLE</code>命令的快捷方法</p>
|
||||
<h3>getData(key)</h3>
|
||||
<p>获取该节点真实数据<code>nodeData</code>的<code>data</code>对象里的指定值，<code>key</code>不传返回这个<code>data</code>对象</p>
|
||||
<h3>setData(data)</h3>
|
||||
<p>设置节点数据，<code>SET_NODE_DATA</code>命令的快捷方法</p>
|
||||
<h3>setText(text)</h3>
|
||||
<p>设置节点文本，<code>SET_NODE_TEXT</code>命令的快捷方法</p>
|
||||
<h3>setImage(imgData)</h3>
|
||||
<p>设置节点图片，<code>SET_NODE_IMAGE</code>命令的快捷方法</p>
|
||||
<h3>setIcon(icons)</h3>
|
||||
<p>设置节点图标，<code>SET_NODE_ICON</code>命令的快捷方法</p>
|
||||
<h3>setHyperlink(link, title)</h3>
|
||||
<p>设置节点超链接，<code>SET_NODE_HYPERLINK</code>命令的快捷方法</p>
|
||||
<h3>setNote(note)</h3>
|
||||
<p>设置节点备注，<code>SET_NODE_NOTE</code>命令的快捷方法</p>
|
||||
<h3>setTag(tag)</h3>
|
||||
<p>设置节点标签，<code>SET_NODE_TAG</code>的快捷方法</p>
|
||||
<h3>hide()</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
</blockquote>
|
||||
<p>隐藏节点及其下级节点</p>
|
||||
<h3>show()</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
</blockquote>
|
||||
<p>显示节点及其下级节点</p>
|
||||
<h3>isParent(node)</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
</blockquote>
|
||||
<p>检测当前节点是否是某个节点的祖先节点</p>
|
||||
<h3>isBrother(node)</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
</blockquote>
|
||||
<p>检测当前节点是否是某个节点的兄弟节点</p>
|
||||
<h3>checkHasGeneralization()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.0+</p>
|
||||
</blockquote>
|
||||
<p>检查是否存在概要</p>
|
||||
<h3>hideGeneralization()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.0+</p>
|
||||
</blockquote>
|
||||
<p>隐藏概要节点</p>
|
||||
<h3>showGeneralization()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.0+</p>
|
||||
</blockquote>
|
||||
<p>显示概要节点</p>
|
||||
<h3>updateGeneralization()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.0+</p>
|
||||
</blockquote>
|
||||
<p>更新概要节点</p>
|
||||
<h3>hasCustomPosition()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.0+</p>
|
||||
</blockquote>
|
||||
<p>检查节点是否存在自定义数据</p>
|
||||
<h3>ancestorHasCustomPosition()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.0+</p>
|
||||
</blockquote>
|
||||
<p>检查节点是否存在自定义位置的祖先节点</p>
|
||||
<h3>getShape()</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.4+</p>
|
||||
</blockquote>
|
||||
<p>获取节点形状</p>
|
||||
<h3>setShape(shape)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.4+</p>
|
||||
</blockquote>
|
||||
<p>设置节点形状，<code>SET_NODE_SHAPE</code>命令的快捷方法</p>
|
||||
<h3>getSelfStyle(prop)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.5+</p>
|
||||
</blockquote>
|
||||
<p>获取节点自身的自定义样式</p>
|
||||
<h3>getParentSelfStyle(prop)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.5+</p>
|
||||
</blockquote>
|
||||
<p>获取最近一个存在自身自定义样式的祖先节点的自定义样式</p>
|
||||
<h3>getSelfInhertStyle(prop)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.5+</p>
|
||||
</blockquote>
|
||||
<p>获取自身可继承的自定义样式</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
85
web/src/pages/Doc/zh/render/index.md
Normal file
85
web/src/pages/Doc/zh/render/index.md
Normal file
@ -0,0 +1,85 @@
|
||||
# Render实例
|
||||
|
||||
`render`实例负载整个渲染过程，可通过`mindMap.renderer`获取到
|
||||
|
||||
## 属性
|
||||
|
||||
### activeNodeList
|
||||
|
||||
获取当前激活的节点列表
|
||||
|
||||
### root
|
||||
|
||||
获取节点树的根节点
|
||||
|
||||
## 方法
|
||||
|
||||
### clearActive()
|
||||
|
||||
清除当前激活的节点
|
||||
|
||||
### clearAllActive()
|
||||
|
||||
清除当前所有激活节点，并会触发`node_active`事件
|
||||
|
||||
### startTextEdit()
|
||||
|
||||
（v0.1.6+）若有文字编辑需求可调用该方法，会禁用回车键和删除键相关快捷键防止冲突
|
||||
|
||||
### endTextEdit()
|
||||
|
||||
（v0.1.6+）结束文字编辑，会恢复回车键和删除键相关快捷键
|
||||
|
||||
### addActiveNode(node)
|
||||
|
||||
添加节点到激活列表里
|
||||
|
||||
### removeActiveNode(node)
|
||||
|
||||
在激活列表里移除某个节点
|
||||
|
||||
### findActiveNodeIndex(node)
|
||||
|
||||
检索某个节点在激活列表里的索引
|
||||
|
||||
### getNodeIndex(node)
|
||||
|
||||
获取节点在同级里的位置索引
|
||||
|
||||
### removeOneNode(node)
|
||||
|
||||
删除某个指定节点
|
||||
|
||||
### copyNode()
|
||||
|
||||
复制节点，操作节点为当前激活节点，有多个激活节点只会操作第一个节点
|
||||
|
||||
### setNodeDataRender(node, data)
|
||||
|
||||
设置节点数据，即`data`字段的数据，并会根据节点大小是否变化来判断是否需要重新渲染该节点，`data`为对象，如：`{text: '我是新文本'}`
|
||||
|
||||
### moveNodeTo(node, toNode)
|
||||
|
||||
> v0.1.5+
|
||||
|
||||
移动一个节点作为另一个节点的子节点
|
||||
|
||||
### insertBefore(node, exist)
|
||||
|
||||
> v0.1.5+
|
||||
|
||||
将节点移动到另一个节点的前面
|
||||
|
||||
### insertAfter(node, exist)
|
||||
|
||||
> v0.1.5+
|
||||
|
||||
将节点移动到另一个节点的后面
|
||||
|
||||
### moveNodeToCenter(node)
|
||||
|
||||
> v0.2.17+
|
||||
|
||||
移动节点到画布中心。
|
||||
|
||||
目前如果是存在缩放的情况下回到中心会重置缩放。
|
||||
66
web/src/pages/Doc/zh/render/index.vue
Normal file
66
web/src/pages/Doc/zh/render/index.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Render实例</h1>
|
||||
<p><code>render</code>实例负载整个渲染过程，可通过<code>mindMap.renderer</code>获取到</p>
|
||||
<h2>属性</h2>
|
||||
<h3>activeNodeList</h3>
|
||||
<p>获取当前激活的节点列表</p>
|
||||
<h3>root</h3>
|
||||
<p>获取节点树的根节点</p>
|
||||
<h2>方法</h2>
|
||||
<h3>clearActive()</h3>
|
||||
<p>清除当前激活的节点</p>
|
||||
<h3>clearAllActive()</h3>
|
||||
<p>清除当前所有激活节点，并会触发<code>node_active</code>事件</p>
|
||||
<h3>startTextEdit()</h3>
|
||||
<p>（v0.1.6+）若有文字编辑需求可调用该方法，会禁用回车键和删除键相关快捷键防止冲突</p>
|
||||
<h3>endTextEdit()</h3>
|
||||
<p>（v0.1.6+）结束文字编辑，会恢复回车键和删除键相关快捷键</p>
|
||||
<h3>addActiveNode(node)</h3>
|
||||
<p>添加节点到激活列表里</p>
|
||||
<h3>removeActiveNode(node)</h3>
|
||||
<p>在激活列表里移除某个节点</p>
|
||||
<h3>findActiveNodeIndex(node)</h3>
|
||||
<p>检索某个节点在激活列表里的索引</p>
|
||||
<h3>getNodeIndex(node)</h3>
|
||||
<p>获取节点在同级里的位置索引</p>
|
||||
<h3>removeOneNode(node)</h3>
|
||||
<p>删除某个指定节点</p>
|
||||
<h3>copyNode()</h3>
|
||||
<p>复制节点，操作节点为当前激活节点，有多个激活节点只会操作第一个节点</p>
|
||||
<h3>setNodeDataRender(node, data)</h3>
|
||||
<p>设置节点数据，即<code>data</code>字段的数据，并会根据节点大小是否变化来判断是否需要重新渲染该节点，<code>data</code>为对象，如：<code>{text: '我是新文本'}</code></p>
|
||||
<h3>moveNodeTo(node, toNode)</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
</blockquote>
|
||||
<p>移动一个节点作为另一个节点的子节点</p>
|
||||
<h3>insertBefore(node, exist)</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
</blockquote>
|
||||
<p>将节点移动到另一个节点的前面</p>
|
||||
<h3>insertAfter(node, exist)</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.5+</p>
|
||||
</blockquote>
|
||||
<p>将节点移动到另一个节点的后面</p>
|
||||
<h3>moveNodeToCenter(node)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.17+</p>
|
||||
</blockquote>
|
||||
<p>移动节点到画布中心。</p>
|
||||
<p>目前如果是存在缩放的情况下回到中心会重置缩放。</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
9
web/src/pages/Doc/zh/select/index.md
Normal file
9
web/src/pages/Doc/zh/select/index.md
Normal file
@ -0,0 +1,9 @@
|
||||
# Select实例
|
||||
|
||||
`select`实例负责鼠标右键多选节点操作，可通过`mindMap.select`获取到该实例
|
||||
|
||||
## 方法
|
||||
|
||||
### toPos(x, y)
|
||||
|
||||
转换鼠标位置为相对于容器`el`的位置
|
||||
20
web/src/pages/Doc/zh/select/index.vue
Normal file
20
web/src/pages/Doc/zh/select/index.vue
Normal file
@ -0,0 +1,20 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>Select实例</h1>
|
||||
<p><code>select</code>实例负责鼠标右键多选节点操作，可通过<code>mindMap.select</code>获取到该实例</p>
|
||||
<h2>方法</h2>
|
||||
<h3>toPos(x, y)</h3>
|
||||
<p>转换鼠标位置为相对于容器<code>el</code>的位置</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
82
web/src/pages/Doc/zh/start/index.md
Normal file
82
web/src/pages/Doc/zh/start/index.md
Normal file
@ -0,0 +1,82 @@
|
||||
# 开始
|
||||
|
||||
## 开发
|
||||
|
||||
### 本地开发
|
||||
|
||||
```bash
|
||||
git clone https://github.com/wanglin2/mind-map.git
|
||||
cd simple-mind-map
|
||||
npm i
|
||||
npm link
|
||||
cd ..
|
||||
cd web
|
||||
npm i
|
||||
npm link simple-mind-map
|
||||
npm run serve
|
||||
```
|
||||
|
||||
### 打包库
|
||||
|
||||
自`0.2.0`版本开始增加了对核心库`simple-mind-map`的打包，复用了示例项目`web`的打包工具。
|
||||
|
||||
```bash
|
||||
cd web
|
||||
npm run buildLibrary
|
||||
```
|
||||
|
||||
`simple-mind-map`库的`package.json`文件提供了两个导出字段：
|
||||
|
||||
```json
|
||||
{
|
||||
"module": "index.js",
|
||||
"main": "./dist/simpleMindMap.umd.min.js",
|
||||
}
|
||||
```
|
||||
|
||||
支持`module`字段的环境会以`index.js`为入口，否则会以打包后的`simpleMindMap.umd.min.js`为入口。
|
||||
|
||||
### 打包demo
|
||||
|
||||
```bash
|
||||
cd web
|
||||
npm run build
|
||||
```
|
||||
|
||||
会自动把`index.html`移动到根目录。
|
||||
|
||||
## 安装
|
||||
|
||||
```bash
|
||||
npm i simple-mind-map
|
||||
```
|
||||
|
||||
`0.2.0`版本之前的注意事项：
|
||||
|
||||
> 注意：本项目为源码直接发布，并未进行打包，如果出现编译失败的情况，Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖：
|
||||
>
|
||||
> ```js
|
||||
> module.exports = {
|
||||
> transpileDependencies: ['simple-mind-map']
|
||||
> }
|
||||
> ```
|
||||
>
|
||||
> 其他项目请自行修改打包配置。
|
||||
|
||||
## 问题
|
||||
|
||||
### 1.在Vite中使用报错，提示xml-js依赖出错
|
||||
|
||||
解决方法：使用如下引入方式：
|
||||
|
||||
```js
|
||||
import MindMap from "simple-mind-map/dist/simpleMindMap.umd.min"
|
||||
```
|
||||
|
||||
`simple-mind-map`包提供未打包的入口字段`module`，依赖的`xml-js`包需要引入`node`环境下的包，所以在`Vite`中获取不到会报错，所以指定引入打包后的入口，相关包都已打包进产物，所以不会报错。
|
||||
|
||||
如果需要二次开发，也就是必须要使用未打包代码的话，如果你不需要解析`xmind`文件的话，可以去除`xmind`模块，如果需要的话那么可以尝试换成其他的解析`xml`为`json`的库。
|
||||
|
||||
### 2.报错`Getting bbox of element "text" is not possible: TypeError: Cannot read properties of undefined (reading 'apply')`
|
||||
|
||||
原因为安装的`@svgdotjs/svg.js`版本太高，手动降到`3.0.16`版本即可。
|
||||
66
web/src/pages/Doc/zh/start/index.vue
Normal file
66
web/src/pages/Doc/zh/start/index.vue
Normal file
@ -0,0 +1,66 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>开始</h1>
|
||||
<h2>开发</h2>
|
||||
<h3>本地开发</h3>
|
||||
<pre class="hljs"><code>git <span class="hljs-built_in">clone</span> https://github.com/wanglin2/mind-map.git
|
||||
<span class="hljs-built_in">cd</span> simple-mind-map
|
||||
npm i
|
||||
npm link
|
||||
<span class="hljs-built_in">cd</span> ..
|
||||
<span class="hljs-built_in">cd</span> web
|
||||
npm i
|
||||
npm link simple-mind-map
|
||||
npm run serve
|
||||
</code></pre>
|
||||
<h3>打包库</h3>
|
||||
<p>自<code>0.2.0</code>版本开始增加了对核心库<code>simple-mind-map</code>的打包，复用了示例项目<code>web</code>的打包工具。</p>
|
||||
<pre class="hljs"><code><span class="hljs-built_in">cd</span> web
|
||||
npm run buildLibrary
|
||||
</code></pre>
|
||||
<p><code>simple-mind-map</code>库的<code>package.json</code>文件提供了两个导出字段：</p>
|
||||
<pre class="hljs"><code>{
|
||||
<span class="hljs-attr">"module"</span>: <span class="hljs-string">"index.js"</span>,
|
||||
<span class="hljs-attr">"main"</span>: <span class="hljs-string">"./dist/simpleMindMap.umd.min.js"</span>,
|
||||
}
|
||||
</code></pre>
|
||||
<p>支持<code>module</code>字段的环境会以<code>index.js</code>为入口，否则会以打包后的<code>simpleMindMap.umd.min.js</code>为入口。</p>
|
||||
<h3>打包demo</h3>
|
||||
<pre class="hljs"><code><span class="hljs-built_in">cd</span> web
|
||||
npm run build
|
||||
</code></pre>
|
||||
<p>会自动把<code>index.html</code>移动到根目录。</p>
|
||||
<h2>安装</h2>
|
||||
<pre class="hljs"><code>npm i simple-mind-map
|
||||
</code></pre>
|
||||
<p><code>0.2.0</code>版本之前的注意事项：</p>
|
||||
<blockquote>
|
||||
<p>注意：本项目为源码直接发布，并未进行打包，如果出现编译失败的情况，Vue CLI创建的项目可以在vue.config.js文件中增加如下配置来让babel-loader编译本依赖：</p>
|
||||
<pre class="hljs"><code><span class="hljs-built_in">module</span>.exports = {
|
||||
<span class="hljs-attr">transpileDependencies</span>: [<span class="hljs-string">'simple-mind-map'</span>]
|
||||
}
|
||||
</code></pre>
|
||||
<p>其他项目请自行修改打包配置。</p>
|
||||
</blockquote>
|
||||
<h2>问题</h2>
|
||||
<h3>1.在Vite中使用报错，提示xml-js依赖出错</h3>
|
||||
<p>解决方法：使用如下引入方式：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> MindMap <span class="hljs-keyword">from</span> <span class="hljs-string">"simple-mind-map/dist/simpleMindMap.umd.min"</span>
|
||||
</code></pre>
|
||||
<p><code>simple-mind-map</code>包提供未打包的入口字段<code>module</code>，依赖的<code>xml-js</code>包需要引入<code>node</code>环境下的包，所以在<code>Vite</code>中获取不到会报错，所以指定引入打包后的入口，相关包都已打包进产物，所以不会报错。</p>
|
||||
<p>如果需要二次开发，也就是必须要使用未打包代码的话，如果你不需要解析<code>xmind</code>文件的话，可以去除<code>xmind</code>模块，如果需要的话那么可以尝试换成其他的解析<code>xml</code>为<code>json</code>的库。</p>
|
||||
<h3>2.报错<code>Getting bbox of element "text" is not possible: TypeError: Cannot read properties of undefined (reading 'apply')</code></h3>
|
||||
<p>原因为安装的<code>@svgdotjs/svg.js</code>版本太高，手动降到<code>3.0.16</code>版本即可。</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
18
web/src/pages/Doc/zh/translate/index.md
Normal file
18
web/src/pages/Doc/zh/translate/index.md
Normal file
@ -0,0 +1,18 @@
|
||||
# 参与翻译
|
||||
|
||||
感谢[Emircan ERKUL](https://github.com/emircanerkul)提供的英文翻译。
|
||||
|
||||
如果你也想参与翻译本文档的话，可以先克隆本仓库。
|
||||
|
||||
翻译的文档在`/web/src/pages/Doc/`目录下，目前支持英文(`en`)、简体中文(`zh`)两种语言。
|
||||
|
||||
如果是新增一种语言类型，那么可以在`/web/src/pages/Doc/`目录下创建一个新目录，然后给每个章节创建一个文件夹，你也可以直接复制已存在的语言目录下的所有章节目录进行翻译，注意，你只需要编写`index.md`文件，章节目录下的`index.vue`文件是脚本根据`index.md`自动生成的。
|
||||
|
||||
如果是给已存在的语言类型新增翻译章节，可以在目标语言目录下创建新的章节目录，目录下只需要创建`index.md`文件即可。
|
||||
|
||||
当你完成翻译后，可以直接提交`Pull requests`。
|
||||
|
||||
如果你是前端程序员，想运行服务，查看文档页面的效果，如果新增章节，需要修改`/web/src/pages/Doc/catalogList.js`文件，在`StartList`或者`APIList`数组里选择合适的位置插入新章节的`path`。然后需要在`web`目录下运行`npm run buildDoc`编译目录和路由，最后`npm run serve`启动本地服务，打开以下路径即可查看文档：
|
||||
|
||||
`ip:port/#/doc/zh/introduction`
|
||||
|
||||
24
web/src/pages/Doc/zh/translate/index.vue
Normal file
24
web/src/pages/Doc/zh/translate/index.vue
Normal file
@ -0,0 +1,24 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>参与翻译</h1>
|
||||
<p>感谢<a href="https://github.com/emircanerkul">Emircan ERKUL</a>提供的英文翻译。</p>
|
||||
<p>如果你也想参与翻译本文档的话，可以先克隆本仓库。</p>
|
||||
<p>翻译的文档在<code>/web/src/pages/Doc/</code>目录下，目前支持英文(<code>en</code>)、简体中文(<code>zh</code>)两种语言。</p>
|
||||
<p>如果是新增一种语言类型，那么可以在<code>/web/src/pages/Doc/</code>目录下创建一个新目录，然后给每个章节创建一个文件夹，你也可以直接复制已存在的语言目录下的所有章节目录进行翻译，注意，你只需要编写<code>index.md</code>文件，章节目录下的<code>index.vue</code>文件是脚本根据<code>index.md</code>自动生成的。</p>
|
||||
<p>如果是给已存在的语言类型新增翻译章节，可以在目标语言目录下创建新的章节目录，目录下只需要创建<code>index.md</code>文件即可。</p>
|
||||
<p>当你完成翻译后，可以直接提交<code>Pull requests</code>。</p>
|
||||
<p>如果你是前端程序员，想运行服务，查看文档页面的效果，如果新增章节，需要修改<code>/web/src/pages/Doc/catalogList.js</code>文件，在<code>StartList</code>或者<code>APIList</code>数组里选择合适的位置插入新章节的<code>path</code>。然后需要在<code>web</code>目录下运行<code>npm run buildDoc</code>编译目录和路由，最后<code>npm run serve</code>启动本地服务，打开以下路径即可查看文档：</p>
|
||||
<p><code>ip:port/#/doc/zh/introduction</code></p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
91
web/src/pages/Doc/zh/utils/index.md
Normal file
91
web/src/pages/Doc/zh/utils/index.md
Normal file
@ -0,0 +1,91 @@
|
||||
# 内置工具方法
|
||||
|
||||
引用：
|
||||
|
||||
```js
|
||||
import {walk, ...} from 'simple-mind-map/src/utils'
|
||||
```
|
||||
|
||||
## 方法
|
||||
|
||||
### walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)
|
||||
|
||||
深度优先遍历树
|
||||
|
||||
`root`：要遍历的树的根节点
|
||||
|
||||
`parent`：父节点
|
||||
|
||||
`beforeCallback`：前序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index
|
||||
|
||||
`afterCallback`：后序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index
|
||||
|
||||
`isRoot`：是否是根节点
|
||||
|
||||
`layerIndex`：节点层级
|
||||
|
||||
`index`：节点在同级节点里的索引
|
||||
|
||||
示例：
|
||||
|
||||
```js
|
||||
walk(tree, null, () => {}, () => {}, false, 0, 0)
|
||||
```
|
||||
|
||||
### bfsWalk(root, callback)
|
||||
|
||||
广度优先遍历树
|
||||
|
||||
### resizeImgSize(width, height, maxWidth, maxHeight)
|
||||
|
||||
缩放图片的尺寸
|
||||
|
||||
`width`：图片原本的宽
|
||||
|
||||
`height`：图片原本的高
|
||||
|
||||
`maxWidth`：要缩放到的宽
|
||||
|
||||
`maxHeight`：要缩放到的高
|
||||
|
||||
`maxWidth`和`maxHeight`可以同时都传，也可以只传一个
|
||||
|
||||
### resizeImg(imgUrl, maxWidth, maxHeight)
|
||||
|
||||
缩放图片，内部先加载图片，然后调用`resizeImgSize`方法，返回一个`promise`
|
||||
|
||||
### simpleDeepClone(data)
|
||||
|
||||
极简的深拷贝方法，只能针对全是基本数据的对象，否则会报错
|
||||
|
||||
### copyRenderTree(tree, root)
|
||||
|
||||
复制渲染树数据，示例：
|
||||
|
||||
```js
|
||||
copyRenderTree({}, this.mindMap.renderer.renderTree)
|
||||
```
|
||||
|
||||
### copyNodeTree(tree, root)
|
||||
|
||||
复制节点树数据，主要是剔除其中的引用`node`实例的`_node`，然后复制`data`对象的数据，示例：
|
||||
|
||||
```js
|
||||
copyNodeTree({}, node)
|
||||
```
|
||||
|
||||
### imgToDataUrl(src)
|
||||
|
||||
图片转成dataURL
|
||||
|
||||
### downloadFile(file, fileName)
|
||||
|
||||
下载文件
|
||||
|
||||
### throttle(fn, time = 300, ctx)
|
||||
|
||||
节流函数
|
||||
|
||||
### asyncRun(taskList, callback = () => {})
|
||||
|
||||
异步执行任务队列，多个任务是同步执行的，没有先后顺序
|
||||
61
web/src/pages/Doc/zh/utils/index.vue
Normal file
61
web/src/pages/Doc/zh/utils/index.vue
Normal file
@ -0,0 +1,61 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>内置工具方法</h1>
|
||||
<p>引用：</p>
|
||||
<pre class="hljs"><code><span class="hljs-keyword">import</span> {walk, ...} <span class="hljs-keyword">from</span> <span class="hljs-string">'simple-mind-map/src/utils'</span>
|
||||
</code></pre>
|
||||
<h2>方法</h2>
|
||||
<h3>walk(root, parent, beforeCallback, afterCallback, isRoot, layerIndex = 0, index = 0)</h3>
|
||||
<p>深度优先遍历树</p>
|
||||
<p><code>root</code>：要遍历的树的根节点</p>
|
||||
<p><code>parent</code>：父节点</p>
|
||||
<p><code>beforeCallback</code>：前序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index</p>
|
||||
<p><code>afterCallback</code>：后序遍历回调函数，回调参数为：root, parent, isRoot, layerIndex, index</p>
|
||||
<p><code>isRoot</code>：是否是根节点</p>
|
||||
<p><code>layerIndex</code>：节点层级</p>
|
||||
<p><code>index</code>：节点在同级节点里的索引</p>
|
||||
<p>示例：</p>
|
||||
<pre class="hljs"><code>walk(tree, <span class="hljs-literal">null</span>, <span class="hljs-function">() =></span> {}, <span class="hljs-function">() =></span> {}, <span class="hljs-literal">false</span>, <span class="hljs-number">0</span>, <span class="hljs-number">0</span>)
|
||||
</code></pre>
|
||||
<h3>bfsWalk(root, callback)</h3>
|
||||
<p>广度优先遍历树</p>
|
||||
<h3>resizeImgSize(width, height, maxWidth, maxHeight)</h3>
|
||||
<p>缩放图片的尺寸</p>
|
||||
<p><code>width</code>：图片原本的宽</p>
|
||||
<p><code>height</code>：图片原本的高</p>
|
||||
<p><code>maxWidth</code>：要缩放到的宽</p>
|
||||
<p><code>maxHeight</code>：要缩放到的高</p>
|
||||
<p><code>maxWidth</code>和<code>maxHeight</code>可以同时都传，也可以只传一个</p>
|
||||
<h3>resizeImg(imgUrl, maxWidth, maxHeight)</h3>
|
||||
<p>缩放图片，内部先加载图片，然后调用<code>resizeImgSize</code>方法，返回一个<code>promise</code></p>
|
||||
<h3>simpleDeepClone(data)</h3>
|
||||
<p>极简的深拷贝方法，只能针对全是基本数据的对象，否则会报错</p>
|
||||
<h3>copyRenderTree(tree, root)</h3>
|
||||
<p>复制渲染树数据，示例：</p>
|
||||
<pre class="hljs"><code>copyRenderTree({}, <span class="hljs-built_in">this</span>.mindMap.renderer.renderTree)
|
||||
</code></pre>
|
||||
<h3>copyNodeTree(tree, root)</h3>
|
||||
<p>复制节点树数据，主要是剔除其中的引用<code>node</code>实例的<code>_node</code>，然后复制<code>data</code>对象的数据，示例：</p>
|
||||
<pre class="hljs"><code>copyNodeTree({}, node)
|
||||
</code></pre>
|
||||
<h3>imgToDataUrl(src)</h3>
|
||||
<p>图片转成dataURL</p>
|
||||
<h3>downloadFile(file, fileName)</h3>
|
||||
<p>下载文件</p>
|
||||
<h3>throttle(fn, time = 300, ctx)</h3>
|
||||
<p>节流函数</p>
|
||||
<h3>asyncRun(taskList, callback = () => {})</h3>
|
||||
<p>异步执行任务队列，多个任务是同步执行的，没有先后顺序</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
55
web/src/pages/Doc/zh/view/index.md
Normal file
55
web/src/pages/Doc/zh/view/index.md
Normal file
@ -0,0 +1,55 @@
|
||||
# View实例
|
||||
|
||||
`view`实例负责视图操作，可通过`mindMap.view`获取到该实例
|
||||
|
||||
## 方法
|
||||
|
||||
### translateX(step)
|
||||
|
||||
`x`方向进行平移，`step`：要平移的像素
|
||||
|
||||
### translateY(step)
|
||||
|
||||
`y`方向进行平移，`step`：要平移的像素
|
||||
|
||||
### translateXTo(x)
|
||||
|
||||
> v0.2.11+
|
||||
|
||||
平移`x`方向到指定位置
|
||||
|
||||
### translateYTo(y)
|
||||
|
||||
> v0.2.11+
|
||||
|
||||
平移`y`方向到指定位置
|
||||
|
||||
### reset()
|
||||
|
||||
恢复到默认的变换
|
||||
|
||||
### narrow()
|
||||
|
||||
缩小
|
||||
|
||||
### enlarge()
|
||||
|
||||
放大
|
||||
|
||||
### getTransformData()
|
||||
|
||||
> v0.1.1+
|
||||
|
||||
获取当前变换数据，可用于回显
|
||||
|
||||
### setTransformData(data)
|
||||
|
||||
> v0.1.1+
|
||||
|
||||
动态设置变换数据，可以通过getTransformData方法获取变换数据
|
||||
|
||||
### setScale(scale)
|
||||
|
||||
> v0.2.17+
|
||||
|
||||
设置缩放
|
||||
53
web/src/pages/Doc/zh/view/index.vue
Normal file
53
web/src/pages/Doc/zh/view/index.vue
Normal file
@ -0,0 +1,53 @@
|
||||
<template>
|
||||
<div>
|
||||
<h1>View实例</h1>
|
||||
<p><code>view</code>实例负责视图操作，可通过<code>mindMap.view</code>获取到该实例</p>
|
||||
<h2>方法</h2>
|
||||
<h3>translateX(step)</h3>
|
||||
<p><code>x</code>方向进行平移，<code>step</code>：要平移的像素</p>
|
||||
<h3>translateY(step)</h3>
|
||||
<p><code>y</code>方向进行平移，<code>step</code>：要平移的像素</p>
|
||||
<h3>translateXTo(x)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.11+</p>
|
||||
</blockquote>
|
||||
<p>平移<code>x</code>方向到指定位置</p>
|
||||
<h3>translateYTo(y)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.11+</p>
|
||||
</blockquote>
|
||||
<p>平移<code>y</code>方向到指定位置</p>
|
||||
<h3>reset()</h3>
|
||||
<p>恢复到默认的变换</p>
|
||||
<h3>narrow()</h3>
|
||||
<p>缩小</p>
|
||||
<h3>enlarge()</h3>
|
||||
<p>放大</p>
|
||||
<h3>getTransformData()</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.1+</p>
|
||||
</blockquote>
|
||||
<p>获取当前变换数据，可用于回显</p>
|
||||
<h3>setTransformData(data)</h3>
|
||||
<blockquote>
|
||||
<p>v0.1.1+</p>
|
||||
</blockquote>
|
||||
<p>动态设置变换数据，可以通过getTransformData方法获取变换数据</p>
|
||||
<h3>setScale(scale)</h3>
|
||||
<blockquote>
|
||||
<p>v0.2.17+</p>
|
||||
</blockquote>
|
||||
<p>设置缩放</p>
|
||||
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
|
||||
</style>
|
||||
@ -1,10 +1,30 @@
|
||||
import Vue from 'vue'
|
||||
import VueRouter from 'vue-router'
|
||||
import EditPage from '@/pages/Edit/Index'
|
||||
import DocPage from '@/pages/Doc/Index'
|
||||
import routerList from '@/pages/Doc/routerList'
|
||||
|
||||
Vue.use(VueRouter)
|
||||
|
||||
const routes = [{ path: '/', name: 'Edit', component: EditPage }]
|
||||
const routes = [
|
||||
{
|
||||
path: '/',
|
||||
name: 'Edit',
|
||||
component: EditPage
|
||||
},
|
||||
...routerList.map((item) => {
|
||||
return {
|
||||
path: `/doc/${item.lang}/`,
|
||||
component: DocPage,
|
||||
children: item.children.map((child) => {
|
||||
return {
|
||||
path: `${child.path}/:h?`,
|
||||
component: () => import(`./pages/Doc/${item.lang}/${child.path}/index.vue`)
|
||||
}
|
||||
})
|
||||
}
|
||||
})
|
||||
]
|
||||
|
||||
const router = new VueRouter({
|
||||
routes
|
||||
|
||||
Loading…
Reference in New Issue
Block a user