Get Started

launch project dev

npm start

build browser

npm run build:browser

Problem to be solved

1. "babel-plugin-add-module-exports": "^1.0.0",插件在babel-loader@8中不起作用，导致在html中需要使用MM.default.App.init()，而不是MM.App.init()。

对象

Item

| 属性 | 类型 | 说明 | | - | - | - | | 1 | 2 | 3 |

Item节点JSON格式描述

{
	"root": {
		"id": "jlecrbfh", // 节点ID
		"text": "My Mind Map", // 节点文本
		"color": "#e33", // 边框、连线颜色
		"bgColor": "#e33", // 背景颜色
		"layout": "map", // 布局
		"children": [ // 子节点
			{
				"id": "cpyjpjtw",
				"text": "aa",
				"side": "right", // 左/右侧
				"color": "#3e3",
				"children": [
					{
						"id": "hxuzpclr",
						"text": "aa-11"
					},
					{
						"id": "ukdcgmkk",
						"text": "aa-22"
					}
				]
			},
			{
				"id": "wihheics",
				"text": "bb",
				"side": "left",
				"color": "#3dd"
			}
		]
	}
}

事件

鼠标事件

参见：Mouse.js

单击click

鼠标点击，选中Item。
设置App.current=Item

mousedown
mouseup
click

双击dblclick

鼠标双击，Item进入编辑模式

mousedown
mouseup
click
mousedown
mouseup
click
dblclick

滚轮wheel

wheel

右键context

mousedown
contextmenu

拖动/平移

mousedown
(多个事件)mousemove
mouseup
click

导出导图JSON数据

JSON.stringify(window.MM.map.toJSON())

从JSON加载导图

window.MM.map.fromJSON(JSON.parse('{"root":{"id":"mhbimzba","text":"My Mind Map","layout":"map","children":[{"id":"jebetoyd","text":"aaa","side":"right","fontColor":"#FFF","color":"#f5222d","bgColor":"#f5222d","children":[{"id":"dtfmqqyh","text":"aaaa111","layout":"graph-top","children":[{"id":"zfevfahd","text":"aaa111222"},{"id":"kaooophf","text":"aaa22111"}]},{"id":"meqeufxz","text":"aaaa222","layout":"graph-bottom","children":[{"id":"zkwxgkuf","text":"asdfasdf"},{"id":"rrogctxu","text":"asdfasdf"}]},{"id":"sbdtiqyk","text":"aaaa333"}]},{"id":"yhxmodnl","text":"bbb","side":"left","fontColor":"#FFF","color":"#52c41a","bgColor":"#52c41a","children":[{"id":"zdszeijz","text":"aaasa","children":[{"id":"lquxkxeg","text":"asdfasdf"}]},{"id":"wupfsbrd","text":"adsfasdf","layout":"tree-left","children":[{"id":"hxpscmnb","text":"asdfas"},{"id":"ndiygbso","text":"asdfasdf"},{"id":"xkrqccni","text":"asdfas"},{"id":"nhxsvavf","text":"asdf"}]},{"id":"foonmdpl","text":"asdf"}]},{"id":"zczslrpe","text":"ccc","side":"right","fontColor":"#FFF","color":"#faad14","bgColor":"#faad14","layout":"tree-right","linkUrl":"https://help.finebi.com/doc-view-268.html","children":[{"id":"ilssyihr","text":"aaazzz"},{"id":"swrrhtvv","text":"ccccc2`"},{"id":"ywatdmka","text":"ccc223"}]}]}}'))

TODO

• [-] 节点增加Link模式
• [ ] 节点Link模式图片默认取网站的favicon，如：https://www.baidu.com/favicon.ico，网站域名截取使用正则匹配
• [-] 节点增加背景颜色属性
• [-] 节点增加字体颜色属性
• [-] 发布browser使用方式
• [-] html文件使用html-loader加载
• [-] css文件使用loader加载
• [ ] img文件使用loader加载
• [-] App增加静态方式：导出、导入json数据
• [ ] Mac双指滑动/鼠标拖动[mousewheel/wheel]拖动画布
• [-] Item节点设置图片链接，增加外挂钩子处理图片链接onItemSetImgUrl
• [ ] Item节点Ctrl+V复制图片
• [-] 键盘监听修改为只监听本组件focus时
• [-] tips、meun组件展示/隐藏模式修改
• [ ] App增加focus属性，考虑增加focus切换时给与视觉反馈
• [ ] Item文本align对齐方式增加可配置
• [ ] Map增加模式：查看、编辑

FIXME

• [-] Item Layout.Bottom\Top修改Link URL不及时更新