| 1 | <!DOCTYPE html>
|
| 2 | <html lang="en">
|
| 3 | <head>
|
| 4 | <meta charset="UTF-8" />
|
| 5 | <meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
| 6 | <meta http-equiv="X-UA-Compatible" content="ie=edge" />
|
| 7 | <title>Document</title>
|
| 8 | <style>
|
| 9 |
|
| 10 | .outer {
|
| 11 | position: relative;
|
| 12 | margin: 50px;
|
| 13 | }
|
| 14 | #map {
|
| 15 | height: 500px;
|
| 16 | overflow: auto;
|
| 17 | }
|
| 18 | </style>
|
| 19 | </head>
|
| 20 | <body>
|
| 21 | <div class="outer">
|
| 22 | <div id="map"></div>
|
| 23 | </div>
|
| 24 | <script type="text/javascript" src="./MindElixir.js"></script>
|
| 25 | </body>
|
| 26 | <script>
|
| 27 | var data = {
|
| 28 | nodeData: {
|
| 29 | id: 'root',
|
| 30 | topic: 'Mind Elixir',
|
| 31 | root: true,
|
| 32 | children: [
|
| 33 | {
|
| 34 | topic: '什么是 Minde Elixir',
|
| 35 | id: 'bd4313fbac40284b',
|
| 36 | direction: 0,
|
| 37 | expanded: true,
|
| 38 | children: [
|
| 39 | {
|
| 40 | topic: '一个网页版思维导图应用程序',
|
| 41 | id: 'beeb823afd6d2114',
|
| 42 | },
|
| 43 | {
|
| 44 | topic: '免费',
|
| 45 | id: 'c1f068377de9f3a0',
|
| 46 | },
|
| 47 | {
|
| 48 | topic: '即将开源',
|
| 49 | id: 'c1f06d38a09f23ca',
|
| 50 | },
|
| 51 | {
|
| 52 | topic: '无框架依赖',
|
| 53 | id: 'c1f06e4cbcf16463',
|
| 54 | expanded: true,
|
| 55 | children: [],
|
| 56 | },
|
| 57 | {
|
| 58 | topic: '两步轻松接入已有项目',
|
| 59 | id: 'c1f1f11a7fbf7550',
|
| 60 | children: [
|
| 61 | {
|
| 62 | topic: "import MindElixir from 'mind-elixir'",
|
| 63 | id: 'c1f1e245b0a89f9b',
|
| 64 | },
|
| 65 | {
|
| 66 | topic: 'new MindElixir({...}).init()',
|
| 67 | id: 'c1f1ebc7072c8928',
|
| 68 | },
|
| 69 | ],
|
| 70 | },
|
| 71 | {
|
| 72 | topic: '使用简单',
|
| 73 | id: 'c1f0723c07b408d7',
|
| 74 | expanded: true,
|
| 75 | children: [
|
| 76 | {
|
| 77 | topic: '操作手感类似其他主流思维导图应用',
|
| 78 | id: 'c1f09612fd89920d',
|
| 79 | },
|
| 80 | ],
|
| 81 | },
|
| 82 | ],
|
| 83 | },
|
| 84 | {
|
| 85 | topic: '基本操作',
|
| 86 | id: 'bd1b66c4b56754d9',
|
| 87 | direction: 0,
|
| 88 | expanded: true,
|
| 89 | children: [
|
| 90 | {
|
| 91 | topic: 'tab 新建子节点',
|
| 92 | id: 'bd1b6892bcab126a',
|
| 93 | },
|
| 94 | {
|
| 95 | topic: 'enter 新建同级节点',
|
| 96 | id: 'bd1b6b632a434b27',
|
| 97 | },
|
| 98 | {
|
| 99 | topic: 'del 删除节点',
|
| 100 | id: 'bd1b983085187c0a',
|
| 101 | },
|
| 102 | ],
|
| 103 | },
|
| 104 | {
|
| 105 | topic: '专注',
|
| 106 | id: 'bd1b9b94a9a7a913',
|
| 107 | direction: 1,
|
| 108 | expanded: true,
|
| 109 | children: [
|
| 110 | {
|
| 111 | topic: '点击右键，专注模式',
|
| 112 | id: 'bd1bb2ac4bbab458',
|
| 113 | },
|
| 114 | {
|
| 115 | topic: '需要取消专注时同样通过右键菜单，点击取消专注',
|
| 116 | id: 'bd1bb4b14d6697c3',
|
| 117 | },
|
| 118 | ],
|
| 119 | },
|
| 120 | {
|
| 121 | topic: '左侧菜单',
|
| 122 | id: 'bd1b9d1816ede134',
|
| 123 | direction: 0,
|
| 124 | expanded: true,
|
| 125 | children: [
|
| 126 | {
|
| 127 | topic: '选择节点分布方式',
|
| 128 | id: 'bd1ba11e620c3c1a',
|
| 129 | expanded: true,
|
| 130 | children: [
|
| 131 | {
|
| 132 | topic: '左侧分布',
|
| 133 | id: 'bd1c1cb51e6745d3',
|
| 134 | },
|
| 135 | {
|
| 136 | topic: '右侧分布',
|
| 137 | id: 'bd1c1e12fd603ff6',
|
| 138 | },
|
| 139 | {
|
| 140 | topic: '左右分布',
|
| 141 | id: 'bd1c1f03def5c97b',
|
| 142 | },
|
| 143 | ],
|
| 144 | },
|
| 145 | ],
|
| 146 | },
|
| 147 | {
|
| 148 | topic: '下方菜单',
|
| 149 | id: 'bd1ba66996df4ba4',
|
| 150 | direction: 1,
|
| 151 | expanded: true,
|
| 152 | children: [
|
| 153 | {
|
| 154 | topic: '全屏',
|
| 155 | id: 'bd1ba81d9bc95a7e',
|
| 156 | },
|
| 157 | {
|
| 158 | topic: '定位到中点',
|
| 159 | id: 'bd1babdd5c18a7a2',
|
| 160 | },
|
| 161 | {
|
| 162 | topic: '画布缩小',
|
| 163 | id: 'bd1bae68e0ab186e',
|
| 164 | },
|
| 165 | {
|
| 166 | topic: '画布放大',
|
| 167 | id: 'bd1bb06377439977',
|
| 168 | },
|
| 169 | ],
|
| 170 | },
|
| 171 | {
|
| 172 | topic: '节点连接',
|
| 173 | id: 'bd1beff607711025',
|
| 174 | direction: 0,
|
| 175 | expanded: true,
|
| 176 | children: [
|
| 177 | {
|
| 178 | topic: '点击右键菜单——连接',
|
| 179 | id: 'bd1bf320da90046a',
|
| 180 | },
|
| 181 | {
|
| 182 | topic: '然后直接点击连接目标',
|
| 183 | id: 'bd1bf6f94ff2e642',
|
| 184 | },
|
| 185 | {
|
| 186 | topic: '可以通过贝塞尔曲线控制点修改连线弧度',
|
| 187 | id: 'bd1c0c4a487bd036',
|
| 188 | },
|
| 189 | ],
|
| 190 | },
|
| 191 | {
|
| 192 | topic: '节点样式修改',
|
| 193 | id: 'bd1c217f9d0b20bd',
|
| 194 | direction: 0,
|
| 195 | expanded: true,
|
| 196 | children: [
|
| 197 | {
|
| 198 | topic: '字体大小',
|
| 199 | id: 'bd1c24420cd2c2f5',
|
| 200 | style: {
|
| 201 | fontSize: '32',
|
| 202 | color: '#3298db',
|
| 203 | },
|
| 204 | },
|
| 205 | {
|
| 206 | topic: '字体颜色',
|
| 207 | id: 'bd1c2a59b9a2739c',
|
| 208 | style: {
|
| 209 | color: '#c0392c',
|
| 210 | },
|
| 211 | },
|
| 212 | {
|
| 213 | topic: '背景颜色',
|
| 214 | id: 'bd1c2de33f057eb4',
|
| 215 | style: {
|
| 216 | color: '#bdc3c7',
|
| 217 | background: '#2c3e50',
|
| 218 | },
|
| 219 | },
|
| 220 | {
|
| 221 | topic: '添加标签',
|
| 222 | id: 'bd1cff58364436d0',
|
| 223 | tags: ['已完成'],
|
| 224 | },
|
| 225 | {
|
| 226 | topic: '添加图标',
|
| 227 | id: 'bd1d0317f7e8a61a',
|
| 228 | icons: ['😂'],
|
| 229 | },
|
| 230 | {
|
| 231 | topic: '文字加粗',
|
| 232 | id: 'bd41fd4ca32322a4',
|
| 233 | style: {
|
| 234 | fontWeight: 'bold',
|
| 235 | },
|
| 236 | },
|
| 237 | ],
|
| 238 | },
|
| 239 | {
|
| 240 | topic: '节点拖拽',
|
| 241 | id: 'bd1f03fee1f63bc6',
|
| 242 | direction: 1,
|
| 243 | expanded: true,
|
| 244 | children: [
|
| 245 | {
|
| 246 | topic: '将一个节点拖拽到另一个节点，会成为另一个节点的子节点',
|
| 247 | id: 'bd1f07c598e729dc',
|
| 248 | },
|
| 249 | ],
|
| 250 | },
|
| 251 | {
|
| 252 | topic: '未来功能',
|
| 253 | id: 'bd1facea32a1967c',
|
| 254 | direction: 1,
|
| 255 | expanded: true,
|
| 256 | children: [
|
| 257 | {
|
| 258 | topic: '节点插入图片',
|
| 259 | id: 'bd1fb1ec53010749',
|
| 260 | },
|
| 261 | {
|
| 262 | topic: '自由节点',
|
| 263 | id: 'bd42d3e3bee992b9',
|
| 264 | },
|
| 265 | {
|
| 266 | topic: '样式优化',
|
| 267 | id: 'beeb7f3db6ad6496',
|
| 268 | },
|
| 269 | ],
|
| 270 | },
|
| 271 | {
|
| 272 | topic: '导出数据',
|
| 273 | id: 'beeb7586973430db',
|
| 274 | direction: 1,
|
| 275 | expanded: true,
|
| 276 | children: [
|
| 277 | {
|
| 278 | topic: 'JSON',
|
| 279 | id: 'beeb784cc189375f',
|
| 280 | },
|
| 281 | {
|
| 282 | topic: 'HTML',
|
| 283 | id: 'beeb7a6bec2d68f5',
|
| 284 | },
|
| 285 | ],
|
| 286 | },
|
| 287 | {
|
| 288 | topic: '注意',
|
| 289 | id: 'bd42dad21aaf6bae',
|
| 290 | direction: 0,
|
| 291 | style: {
|
| 292 | background: '#f1c40e',
|
| 293 | },
|
| 294 | expanded: true,
|
| 295 | children: [
|
| 296 | {
|
| 297 | topic: '暂时只能手动保存',
|
| 298 | id: 'bd42e1d0163ebf04',
|
| 299 | expanded: true,
|
| 300 | children: [
|
| 301 | {
|
| 302 | topic: '点击右上角保存',
|
| 303 | id: 'bd42e619051878b3',
|
| 304 | expanded: true,
|
| 305 | children: [],
|
| 306 | },
|
| 307 | {
|
| 308 | topic: 'ctrl + S 保存',
|
| 309 | id: 'bd42e97d7ac35e99',
|
| 310 | },
|
| 311 | ],
|
| 312 | },
|
| 313 | ],
|
| 314 | },
|
| 315 | ],
|
| 316 | expanded: true,
|
| 317 | },
|
| 318 | linkData: {},
|
| 319 | }
|
| 320 | console.log('MindElixir.SIDE', MindElixir.SIDE)
|
| 321 | let mind = new MindElixir({
|
| 322 | el: '#map',
|
| 323 | direction: MindElixir.SIDE,
|
| 324 | data: {
|
| 325 | nodeData: {
|
| 326 | id: 'root',
|
| 327 | topic: 'Mind Elixir',
|
| 328 | root: true,
|
| 329 | children:[]
|
| 330 | },
|
| 331 | linkData: {},
|
| 332 | },
|
| 333 | draggable: true,
|
| 334 | contextMenu: true,
|
| 335 | toolBar: true,
|
| 336 | nodeMenu: true,
|
| 337 | keypress: true,
|
| 338 | })
|
| 339 | mind.init()
|
| 340 | console.log('test E function', E('bd4313fbac40284b'))
|
| 341 | </script>
|
| 342 | </html>
|