Commit 1a3034cd authored by 吴志俊's avatar 吴志俊

chaos

parent 7aabc8d7
This diff is collapsed.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>KityMinder Example</title>
......@@ -22,33 +23,39 @@
bottom: 10px;
right: 10px;
}
#png {
position: absolute;
}
</style>
<script type="text/javascript" src="node_modules/kity/dist/kity.js"></script>
</head>
<body>
<!-- <script> -->
<script id="minder-view" type="application/kityminder" minder-data-type="json">
{
"root": {
"data": {
"text": "百度产品",
"image": "https://www.baidu.com/img/bd_logo1.png?where=super",
"imageSize": { "width": 270, "height": 129 }
},
"children": [
{ "data": { "text": "新闻" } },
{ "data": { "text": "网页", "priority": 1 } },
{ "data": { "text": "贴吧", "priority": 2 } },
{ "data": { "text": "知道", "priority": 2 } },
{ "data": { "text": "音乐", "priority": 3 } },
{ "data": { "text": "图片", "priority": 3 } },
{ "data": { "text": "视频", "priority": 3 } },
{ "data": { "text": "地图", "priority": 3 } },
{ "data": { "text": "百科", "priority": 3 } },
{ "data": { "text": "更多", "hyperlink": "http://www.baidu.com/more" } }
]
{
"root": {
"data": {
"text": "百度产品",
"image": "https://www.baidu.com/img/bd_logo1.png?where=super",
"imageSize": { "width": 270, "height": 129 }
},
"children": [
{ "data": { "text": "新闻", "priority": 0, "progress": 9 } },
{ "data": { "text": "网页", "priority": 1, "progress": 8 } },
{ "data": { "text": "贴吧", "priority": 2, "progress": 7 } },
{ "data": { "text": "知道", "priority": 3, "progress": 6 } },
{ "data": { "text": "音乐", "priority": 4, "progress": 5 } },
{ "data": { "text": "图片", "priority": 5, "progress": 4 } },
{ "data": { "text": "视频", "priority": 6, "progress": 3 } },
{ "data": { "text": "地图", "priority": 7, "progress": 2 } },
{ "data": { "text": "百科", "priority": 8, "progress": 1 } },
{ "data": { "text": "更多", "priority": 9, "progress": 0, "hyperlink": "http://www.baidu.com/more" } }
]
}
}
}
</script>
</body>
......@@ -59,7 +66,7 @@
seajs.config({
base: './src'
});
define('start', function(require) {
define('start', function (require) {
var Minder = require('kityminder').Minder;
// 创建 km 实例
......@@ -68,4 +75,82 @@
});
seajs.use('start');
</script>
<script>
setTimeout(async () => {
km.importJson({
"root": {
"data": {
"id": "01296369916a",
"created": 1629452083,
"text": "新建脑图",
"resource": [],
"expandState": "expand",
"priority": null,
"note": "",
"image": "http://yun.duiba.com.cn/duiba-trigram-web-node/static/logo4.png",
"imageTitle": "logo4.png",
"imageSize": {
"width": 200,
"height": 55
}
},
"children": [
{
"data": {
"id": "cdo8nuv2pa80",
"created": 1629452383225,
"text": "todo",
"progress": 1,
"resource": [
"✔"
],
"layout": null,
"expandState": "collapse",
"priority": 1,
"image": "http://yun.duiba.com.cn/duiba-trigram-web-node/static/logo4.png",
"imageTitle": "logo4.png",
"imageSize": {
"width": 200,
"height": 55
},
"hyperlink": "https://www.example.com/",
"note": "Hi!"
},
"children": [
{
"data": {
"id": "ce5c8wh0aqw0",
"created": 1631189014969,
"text": "Todo",
"layout": null
},
"children": []
},
{
"data": {
"id": "ce5c8xophq80",
"created": 1631189017611,
"text": "Todo",
"layout": null
},
"children": []
}
]
}
]
},
"template": "structure",
"theme": "snow",
"version": "1.4.43"
})
window._ = new Image()
_.id = 'png'
_.src = await km.exportData('png')
document.body.appendChild(_)
}, 2000);
const reload = async () => {
_.src = await km.exportData('png')
}
</script>
</html>
\ No newline at end of file
This diff is collapsed.
This source diff could not be displayed because it is too large. You can view the blob instead.
......@@ -1279,7 +1279,8 @@
"ansi-regex": {
"version": "2.1.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"aproba": {
"version": "1.1.1",
......@@ -1330,7 +1331,8 @@
"balanced-match": {
"version": "0.4.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"bcrypt-pbkdf": {
"version": "1.0.1",
......@@ -1345,6 +1347,7 @@
"version": "0.0.9",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"inherits": "~2.0.0"
}
......@@ -1353,6 +1356,7 @@
"version": "2.10.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"hoek": "2.x.x"
}
......@@ -1361,6 +1365,7 @@
"version": "1.1.7",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"balanced-match": "^0.4.1",
"concat-map": "0.0.1"
......@@ -1369,7 +1374,8 @@
"buffer-shims": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"caseless": {
"version": "0.12.0",
......@@ -1386,12 +1392,14 @@
"code-point-at": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"combined-stream": {
"version": "1.0.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"delayed-stream": "~1.0.0"
}
......@@ -1399,22 +1407,26 @@
"concat-map": {
"version": "0.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"console-control-strings": {
"version": "1.1.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"core-util-is": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"cryptiles": {
"version": "2.0.5",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"boom": "2.x.x"
}
......@@ -1454,7 +1466,8 @@
"delayed-stream": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"delegates": {
"version": "1.0.0",
......@@ -1486,7 +1499,8 @@
"extsprintf": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"forever-agent": {
"version": "0.6.1",
......@@ -1508,12 +1522,14 @@
"fs.realpath": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"fstream": {
"version": "1.0.11",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"graceful-fs": "^4.1.2",
"inherits": "~2.0.0",
......@@ -1569,6 +1585,7 @@
"version": "7.1.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"fs.realpath": "^1.0.0",
"inflight": "^1.0.4",
......@@ -1581,7 +1598,8 @@
"graceful-fs": {
"version": "4.1.11",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"har-schema": {
"version": "1.0.5",
......@@ -1609,6 +1627,7 @@
"version": "3.1.3",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"boom": "2.x.x",
"cryptiles": "2.x.x",
......@@ -1619,7 +1638,8 @@
"hoek": {
"version": "2.16.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"http-signature": {
"version": "1.1.1",
......@@ -1636,6 +1656,7 @@
"version": "1.0.6",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"once": "^1.3.0",
"wrappy": "1"
......@@ -1644,7 +1665,8 @@
"inherits": {
"version": "2.0.3",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"ini": {
"version": "1.3.4",
......@@ -1656,6 +1678,7 @@
"version": "1.0.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"number-is-nan": "^1.0.0"
}
......@@ -1669,7 +1692,8 @@
"isarray": {
"version": "1.0.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"isstream": {
"version": "0.1.2",
......@@ -1742,12 +1766,14 @@
"mime-db": {
"version": "1.27.0",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"mime-types": {
"version": "2.1.15",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"mime-db": "~1.27.0"
}
......@@ -1756,6 +1782,7 @@
"version": "3.0.4",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"brace-expansion": "^1.1.7"
}
......@@ -1763,12 +1790,14 @@
"minimist": {
"version": "0.0.8",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"mkdirp": {
"version": "0.5.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"minimist": "0.0.8"
}
......@@ -1823,7 +1852,8 @@
"number-is-nan": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"oauth-sign": {
"version": "0.8.2",
......@@ -1841,6 +1871,7 @@
"version": "1.4.0",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"wrappy": "1"
}
......@@ -1870,7 +1901,8 @@
"path-is-absolute": {
"version": "1.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"performance-now": {
"version": "0.2.0",
......@@ -1881,7 +1913,8 @@
"process-nextick-args": {
"version": "1.0.7",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"punycode": {
"version": "1.4.1",
......@@ -1919,6 +1952,7 @@
"version": "2.2.9",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"buffer-shims": "~1.0.0",
"core-util-is": "~1.0.0",
......@@ -1963,6 +1997,7 @@
"version": "2.6.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"glob": "^7.0.5"
}
......@@ -1970,7 +2005,8 @@
"safe-buffer": {
"version": "5.0.1",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"semver": {
"version": "5.3.0",
......@@ -1994,6 +2030,7 @@
"version": "1.0.9",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"hoek": "2.x.x"
}
......@@ -2027,6 +2064,7 @@
"version": "1.0.2",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"code-point-at": "^1.0.0",
"is-fullwidth-code-point": "^1.0.0",
......@@ -2037,6 +2075,7 @@
"version": "1.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"safe-buffer": "^5.0.1"
}
......@@ -2051,6 +2090,7 @@
"version": "3.0.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"ansi-regex": "^2.0.0"
}
......@@ -2065,6 +2105,7 @@
"version": "2.2.1",
"bundled": true,
"dev": true,
"optional": true,
"requires": {
"block-stream": "*",
"fstream": "^1.0.2",
......@@ -2120,7 +2161,8 @@
"util-deprecate": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
},
"uuid": {
"version": "3.0.1",
......@@ -2149,7 +2191,8 @@
"wrappy": {
"version": "1.0.2",
"bundled": true,
"dev": true
"dev": true,
"optional": true
}
}
},
......
define(function(require, exports, module) {
define(function (require, exports, module) {
var kity = require('./kity');
var utils = require('./utils');
var Minder = require('./minder');
var MinderNode = require('./node');
var MinderEvent = require('./event');
var Promise = require('./promise');
var COMMAND_STATE_NORMAL = 0;
var COMMAND_STATE_DISABLED = -1;
......@@ -13,40 +14,40 @@ define(function(require, exports, module) {
* 表示一个命令,包含命令的查询及执行
*/
var Command = kity.createClass('Command', {
constructor: function() {
constructor: function () {
this._isContentChange = true;
this._isSelectionChange = false;
},
execute: function(minder, args) {
execute: function (minder, args) {
throw new Error('Not Implement: Command.execute()');
},
setContentChanged: function(val) {
setContentChanged: function (val) {
this._isContentChange = !!val;
},
isContentChanged: function() {
isContentChanged: function () {
return this._isContentChange;
},
setSelectionChanged: function(val) {
setSelectionChanged: function (val) {
this._isSelectionChange = !!val;
},
isSelectionChanged: function() {
isSelectionChanged: function () {
return this._isContentChange;
},
queryState: function(km) {
queryState: function (km) {
return COMMAND_STATE_NORMAL;
},
queryValue: function(km) {
queryValue: function (km) {
return 0;
},
isNeedUndo: function() {
isNeedUndo: function () {
return true;
}
});
......@@ -56,11 +57,11 @@ define(function(require, exports, module) {
Command.STATE_DISABLED = COMMAND_STATE_DISABLED;
kity.extendClass(Minder, {
_getCommand: function(name) {
_getCommand: function (name) {
return this._commands[name.toLowerCase()];
},
_queryCommand: function(name, type, args) {
_queryCommand: function (name, type, args) {
var cmd = this._getCommand(name);
if (cmd) {
var queryCmd = cmd['query' + type];
......@@ -84,7 +85,7 @@ define(function(require, exports, module) {
* 0: 命令可用
* 1: 命令当前可用并且已经执行过
*/
queryCommandState: function(name) {
queryCommandState: function (name) {
return this._queryCommand(name, 'State', [].slice.call(arguments, 1));
},
......@@ -101,7 +102,7 @@ define(function(require, exports, module) {
* 如果命令不存在,返回 undefined
* 不同命令具有不同返回值,具体请查看 [Command](command) 章节
*/
queryCommandValue: function(name) {
queryCommandValue: function (name) {
return this._queryCommand(name, 'Value', [].slice.call(arguments, 1));
},
......@@ -115,7 +116,7 @@ define(function(require, exports, module) {
* @param {string} name 要执行的命令名称
* @param {argument} args 要传递给命令的其它参数
*/
execCommand: function(name) {
execCommand: function (name) {
if (!name) return null;
name = name.toLowerCase();
......@@ -144,13 +145,18 @@ define(function(require, exports, module) {
result = cmd.execute.apply(cmd, [me].concat(cmdArgs));
this._fire(new MinderEvent('execCommand', eventParams, false));
var rest = function () {
this._fire(new MinderEvent('execCommand', eventParams, false));
if (cmd.isContentChanged()) {
this._firePharse(new MinderEvent('contentchange'));
}
if (cmd.isContentChanged()) {
this._firePharse(new MinderEvent('contentchange'));
}
this._interactChange();
this._interactChange();
}.bind(this);
if (result && result.then) {
result.then(rest, rest);
} else rest();
}
this._hasEnterExecCommand = false;
} else {
......
define(function(require, exports, module) {
define(function (require, exports, module) {
var kity = require('./kity');
var utils = require('./utils');
var Minder = require('./minder');
function listen(element, type, handler) {
type.split(' ').forEach(function(name) {
type.split(' ').forEach(function (name) {
element.addEventListener(name, handler, false);
});
}
Minder.registerInitHook(function(option) {
Minder.registerInitHook(function (option) {
this.setDefaultOptions({
enableKeyReceiver: true
});
if (this.getOption('enableKeyReceiver')) {
this.on('paperrender', function() {
this.on('paperrender', function () {
this._initKeyReceiver();
});
}
});
kity.extendClass(Minder, {
_initKeyReceiver: function() {
_initKeyReceiver: function () {
if (this._keyReceiver) return;
var receiver = this._keyReceiver = document.createElement('input');
receiver.classList.add('km-receiver');
receiver.readOnly = true
var renderTarget = this._renderTarget;
renderTarget.appendChild(receiver);
var minder = this;
listen(receiver, 'keydown keyup keypress copy paste blur focus input', function(e) {
listen(receiver, 'keydown keyup keypress copy paste blur focus input', function (e) {
switch (e.type) {
case 'blur':
minder.blur();
......@@ -46,14 +46,14 @@ define(function(require, exports, module) {
break;
}
minder._firePharse(e);
e.preventDefault();
// e.preventDefault();
});
this.on('focus', function() {
this.on('focus', function () {
receiver.select();
receiver.focus();
});
this.on('blur', function() {
this.on('blur', function () {
receiver.blur();
});
......
define(function(require, exports, module) {
define(function (require, exports, module) {
var kity = require('../core/kity');
var utils = require('../core/utils');
var keymap = require('../core/keymap');
......@@ -7,7 +7,7 @@ define(function(require, exports, module) {
var Module = require('../core/module');
var Renderer = require('../core/render');
Module.register('Expand', function() {
Module.register('Expand', function () {
var minder = this;
var EXPAND_STATE_DATA = 'expandState',
STATE_EXPAND = 'expand',
......@@ -20,7 +20,7 @@ define(function(require, exports, module) {
* 展开节点
* @param {Policy} policy 展开的策略,默认为 KEEP_STATE
*/
expand: function() {
expand: function () {
this.setData(EXPAND_STATE_DATA, STATE_EXPAND);
return this;
},
......@@ -28,7 +28,7 @@ define(function(require, exports, module) {
/**
* 收起节点
*/
collapse: function() {
collapse: function () {
this.setData(EXPAND_STATE_DATA, STATE_COLLAPSE);
return this;
},
......@@ -36,7 +36,7 @@ define(function(require, exports, module) {
/**
* 判断节点当前的状态是否为展开
*/
isExpanded: function() {
isExpanded: function () {
var expanded = this.getData(EXPAND_STATE_DATA) !== STATE_COLLAPSE;
return expanded && (this.isRoot() || this.parent.isExpanded());
},
......@@ -44,7 +44,7 @@ define(function(require, exports, module) {
/**
* 判断节点当前的状态是否为收起
*/
isCollapsed: function() {
isCollapsed: function () {
return !this.isExpanded();
}
});
......@@ -62,7 +62,7 @@ define(function(require, exports, module) {
var ExpandCommand = kity.createClass('ExpandCommand', {
base: Command,
execute: function(km, justParents) {
execute: function (km, justParents) {
var node = km.getSelectedNode();
if (!node) return;
if (justParents) {
......@@ -76,7 +76,7 @@ define(function(require, exports, module) {
km.layout(100);
},
queryState: function(km) {
queryState: function (km) {
var node = km.getSelectedNode();
return node && !node.isRoot() && !node.isExpanded() ? 0 : -1;
}
......@@ -91,8 +91,8 @@ define(function(require, exports, module) {
*/
var ExpandToLevelCommand = kity.createClass('ExpandToLevelCommand', {
base: Command,
execute: function(km, level) {
km.getRoot().traverse(function(node) {
execute: function (km, level) {
km.getRoot().traverse(function (node) {
if (node.getLevel() < level) node.expand();
if (node.getLevel() == level && !node.isLeaf()) node.collapse();
});
......@@ -111,7 +111,7 @@ define(function(require, exports, module) {
var CollapseCommand = kity.createClass('CollapseCommand', {
base: Command,
execute: function(km) {
execute: function (km) {
var node = km.getSelectedNode();
if (!node) return;
......@@ -120,7 +120,7 @@ define(function(require, exports, module) {
km.layout();
},
queryState: function(km) {
queryState: function (km) {
var node = km.getSelectedNode();
return node && !node.isRoot() && node.isExpanded() ? 0 : -1;
}
......@@ -129,7 +129,7 @@ define(function(require, exports, module) {
var Expander = kity.createClass('Expander', {
base: kity.Group,
constructor: function(node) {
constructor: function (node) {
this.callBase();
this.radius = 6;
this.outline = new kity.Circle(this.radius).stroke('gray').fill('white');
......@@ -140,8 +140,8 @@ define(function(require, exports, module) {
this.setStyle('cursor', 'pointer');
},
initEvent: function(node) {
this.on('mousedown', function(e) {
initEvent: function (node) {
this.on('mousedown', function (e) {
minder.select([node], true);
if (node.isExpanded()) {
node.collapse();
......@@ -153,13 +153,13 @@ define(function(require, exports, module) {
e.stopPropagation();
e.preventDefault();
});
this.on('dblclick click mouseup', function(e) {
this.on('dblclick click mouseup', function (e) {
e.stopPropagation();
e.preventDefault();
});
},
setState: function(state) {
setState: function (state) {
if (state == 'hide') {
this.setVisible(false);
return;
......@@ -176,7 +176,7 @@ define(function(require, exports, module) {
var ExpanderRenderer = kity.createClass('ExpanderRenderer', {
base: Renderer,
create: function(node) {
create: function (node) {
if (node.isRoot()) return;
this.expander = new Expander(node);
node.getRenderContainer().prependShape(this.expander);
......@@ -185,19 +185,19 @@ define(function(require, exports, module) {
return this.expander;
},
shouldRender: function(node) {
shouldRender: function (node) {
return !node.isRoot();
},
update: function(expander, node, box) {
update: function (expander, node, box) {
if (!node.parent) return;
var visible = node.parent.isExpanded();
expander.setState(visible && node.children.length ? node.getData(EXPAND_STATE_DATA) : 'hide');
var vector = node.getLayoutVectorIn().normalize(expander.radius + node.getStyle('stroke-width'));
var position = node.getVertexIn().offset(vector.reverse());
var vector = node.getLayoutVectorOut().normalize(expander.radius + node.getStyle('stroke-width'));
var position = node.getVertexOut().offset(vector)
this.expander.setTranslate(position);
}
......@@ -210,13 +210,13 @@ define(function(require, exports, module) {
'collapse': CollapseCommand
},
events: {
'layoutapply': function(e) {
'layoutapply': function (e) {
var r = e.node.getRenderer('ExpanderRenderer');
if (r.getRenderShape()) {
r.update(r.getRenderShape(), e.node);
}
},
'beforerender': function(e) {
'beforerender': function (e) {
var node = e.node;
var visible = !node.parent || node.parent.isExpanded();
var minder = this;
......@@ -224,13 +224,13 @@ define(function(require, exports, module) {
node.getRenderContainer().setVisible(visible);
if (!visible) e.stopPropagation();
},
'normal.keydown': function(e) {
'normal.keydown': function (e) {
if (this.getStatus() == 'textedit') return;
if (e.originEvent.keyCode == keymap['/']) {
var node = this.getSelectedNode();
if (!node || node == this.getRoot()) return;
var expanded = node.isExpanded();
this.getSelectedNodes().forEach(function(node) {
this.getSelectedNodes().forEach(function (node) {
if (expanded) node.collapse();
else node.expand();
node.renderTree();
......@@ -255,34 +255,34 @@ define(function(require, exports, module) {
},
contextmenu: [{
command: 'expandtoleaf',
query: function() {
query: function () {
return !minder.getSelectedNode();
},
fn: function(minder) {
fn: function (minder) {
minder.execCommand('expandtolevel', 9999);
}
}, {
command: 'expandtolevel1',
query: function() {
query: function () {
return !minder.getSelectedNode();
},
fn: function(minder) {
fn: function (minder) {
minder.execCommand('expandtolevel', 1);
}
}, {
command: 'expandtolevel2',
query: function() {
query: function () {
return !minder.getSelectedNode();
},
fn: function(minder) {
fn: function (minder) {
minder.execCommand('expandtolevel', 2);
}
},{
}, {
command: 'expandtolevel3',
query: function() {
query: function () {
return !minder.getSelectedNode();
},
fn: function(minder) {
fn: function (minder) {
minder.execCommand('expandtolevel', 3);
}
}, {
......
define(function(require, exports, module) {
define(function (require, exports, module) {
var kity = require('../core/kity');
var utils = require('../core/utils');
......@@ -7,14 +7,15 @@ define(function(require, exports, module) {
var Command = require('../core/command');
var Module = require('../core/module');
var Renderer = require('../core/render');
var Promise = require('../core/promise');
Module.register('image', function() {
Module.register('image', function () {
function loadImageSize(url, callback) {
var img = document.createElement('img');
img.onload = function() {
img.onload = function () {
callback(img.width, img.height);
};
img.onerror = function() {
img.onerror = function () {
callback(null);
};
img.src = url;
......@@ -52,32 +53,45 @@ define(function(require, exports, module) {
var ImageCommand = kity.createClass('ImageCommand', {
base: Command,
execute: function(km, url, title) {
execute: function (km, url, title) {
var nodes = km.getSelectedNodes();
loadImageSize(url, function(width, height) {
nodes.forEach(function(n) {
var size = fitImageSize(
width, height,
km.getOption('maxImageWidth'),
km.getOption('maxImageHeight'));
n.setData('image', url);
n.setData('imageTitle', url && title);
n.setData('imageSize', url && size);
n.render();
return new Promise(function (res, rej) {
if (!url) {
nodes.forEach(function (n) {
n.setData('image');
n.setData('imageTitle');
n.setData('imageSize');
n.render();
});
km.fire('saveScene');
km.layout(300);
return rej();
}
loadImageSize(url, function (width, height) {
nodes.forEach(function (n) {
var size = fitImageSize(
width, height,
km.getOption('maxImageWidth'),
km.getOption('maxImageHeight'));
n.setData('image', url);
n.setData('imageTitle', url && title);
n.setData('imageSize', url && size);
n.render();
});
km.fire('saveScene');
km.layout(300);
res();
});
km.fire('saveScene');
km.layout(300);
});
})
},
queryState: function(km) {
queryState: function (km) {
var nodes = km.getSelectedNodes(),
result = 0;
if (nodes.length === 0) {
return -1;
}
nodes.forEach(function(n) {
nodes.forEach(function (n) {
if (n && n.getData('image')) {
result = 0;
return false;
......@@ -85,7 +99,7 @@ define(function(require, exports, module) {
});
return result;
},
queryValue: function(km) {
queryValue: function (km) {
var node = km.getSelectedNode();
return {
url: node.getData('image'),
......@@ -97,15 +111,15 @@ define(function(require, exports, module) {
var ImageRenderer = kity.createClass('ImageRenderer', {
base: Renderer,
create: function(node) {
create: function (node) {
return new kity.Image(node.getData('image'));
},
shouldRender: function(node) {
shouldRender: function (node) {
return node.getData('image');
},
update: function(image, node, box) {
update: function (image, node, box) {
var url = node.getData('image');
var title = node.getData('imageTitle');
var size = node.getData('imageSize');
......
define(function(require, exports, module) {
define(function (require, exports, module) {
var kity = require('../core/kity');
var utils = require('../core/utils');
......@@ -8,7 +8,7 @@ define(function(require, exports, module) {
var Module = require('../core/module');
var Renderer = require('../core/render');
Module.register('PriorityModule', function() {
Module.register('PriorityModule', function () {
var minder = this;
// Designed by Akikonata
......@@ -34,18 +34,18 @@ define(function(require, exports, module) {
var PriorityIcon = kity.createClass('PriorityIcon', {
base: kity.Group,
constructor: function() {
constructor: function () {
this.callBase();
this.setSize(20);
this.create();
this.setId(utils.uuid('node_priority'));
},
setSize: function(size) {
setSize: function (size) {
this.width = this.height = size;
},
create: function() {
create: function () {
var white, back, mask, number; // 4 layer
white = new kity.Path().setPathData(MASK_PATH).fill('white');
......@@ -66,7 +66,7 @@ define(function(require, exports, module) {
this.number = number;
},
setValue: function(value) {
setValue: function (value) {
var back = this.back,
mask = this.mask,
number = this.number;
......@@ -78,7 +78,7 @@ define(function(require, exports, module) {
mask.fill(color[0]);
}
number.setContent(value);
number.setContent('P' + (value - 1));
}
});
......@@ -94,14 +94,14 @@ define(function(require, exports, module) {
*/
var PriorityCommand = kity.createClass('SetPriorityCommand', {
base: Command,
execute: function(km, value) {
execute: function (km, value) {
var nodes = km.getSelectedNodes();
for (var i = 0; i < nodes.length; i++) {
nodes[i].setData(PRIORITY_DATA, value || null).render();
}
km.layout();
},
queryValue: function(km) {
queryValue: function (km) {
var nodes = km.getSelectedNodes();
var val;
for (var i = 0; i < nodes.length; i++) {
......@@ -111,7 +111,7 @@ define(function(require, exports, module) {
return val || null;
},
queryState: function(km) {
queryState: function (km) {
return km.getSelectedNodes().length ? 0 : -1;
}
});
......@@ -123,15 +123,15 @@ define(function(require, exports, module) {
left: kity.createClass('PriorityRenderer', {
base: Renderer,
create: function(node) {
create: function (node) {
return new PriorityIcon();
},
shouldRender: function(node) {
shouldRender: function (node) {
return node.getData(PRIORITY_DATA);
},
update: function(icon, node, box) {
update: function (icon, node, box) {
var data = node.getData(PRIORITY_DATA);
var spaceLeft = node.getStyle('space-left'),
x, y;
......
define(function(require, exports, module) {
define(function (require, exports, module) {
var kity = require('../core/kity');
var utils = require('../core/utils');
......@@ -8,7 +8,7 @@ define(function(require, exports, module) {
var Module = require('../core/module');
var Renderer = require('../core/render');
Module.register('ProgressModule', function() {
Module.register('ProgressModule', function () {
var minder = this;
var PROGRESS_DATA = 'progress';
......@@ -22,7 +22,7 @@ define(function(require, exports, module) {
// jscs:disable maximumLineLength
var FRAME_PATH = 'M10,0C4.477,0,0,4.477,0,10c0,5.523,4.477,10,10,10s10-4.477,10-10C20,4.477,15.523,0,10,0zM10,18c-4.418,0-8-3.582-8-8s3.582-8,8-8s8,3.582,8,8S14.418,18,10,18z';
var FRAME_GRAD = new kity.LinearGradient().pipe(function(g) {
var FRAME_GRAD = new kity.LinearGradient().pipe(function (g) {
g.setStartPosition(0, 0);
g.setEndPosition(0, 1);
g.addStop(0, '#fff');
......@@ -37,7 +37,7 @@ define(function(require, exports, module) {
var ProgressIcon = kity.createClass('ProgressIcon', {
base: kity.Group,
constructor: function(value) {
constructor: function (value) {
this.callBase();
this.setSize(20);
this.create();
......@@ -46,18 +46,18 @@ define(function(require, exports, module) {
this.translate(0.5, 0.5);
},
setSize: function(size) {
setSize: function (size) {
this.width = this.height = size;
},
create: function() {
create: function () {
var bg, pie, shadow, frame, check;
bg = new kity.Circle(9)
.fill(BG_COLOR);
pie = new kity.Pie(9, 0)
pie = new kity.Pie(9, 0).rotate(180)
.fill(PIE_COLOR);
shadow = new kity.Path()
......@@ -75,14 +75,49 @@ define(function(require, exports, module) {
.setPathData(CHECK_PATH)
.fill(CHECK_COLOR);
this.addShapes([bg, pie, shadow, check, frame]);
cross = new kity.Path()
.setTranslate(-10, -10)
.setPathData(
"M5,5l.7,-.7l4.3,4.3l4.3,-4.3l1.4,1.4l-4.3,4.3l4.3,4.3l-1.4,1.4l-4.3,-4.3l-4.3,4.3l-1.4,-1.4l4.3,-4.3l-4.3,-4.3l.7,-.7z"
)
.fill("#d81e06")
skip = new kity.Path()
.setTranslate(-8, -8)
.setScale(0.016)
.setPathData(
"M747.3152 415.6416a256.0512 256.0512 0 0 0-489.472 96.768H341.504a170.6496 170.6496 0 0 1 327.6288-58.624l-115.0976 20.9408 227.84 116.736 48.2816-251.392-82.8416 75.5712zM0 512C0 229.2224 229.1712 0 512 0c282.7776 0 512 229.1712 512 512 0 282.7776-229.1712 512-512 512-282.7776 0-512-229.1712-512-512z"
)
.fill('#BE96F9')
this.addShapes([bg, pie, shadow, check, frame, cross, skip]);
this.pie = pie;
this.check = check;
this.cross = cross;
this.skip = skip;
},
setValue: function(value) {
this.pie.setAngle(-360 * (value - 1) / 8);
this.check.setVisible(value == 9);
setValue: function (value) {
this.check.setVisible(false)
this.cross.setVisible(false)
this.skip.setVisible(false)
this.pie.setVisible(false)
switch (value) {
case 1:
this.check.setVisible(true)
this.pie.setAngle(360).fill(PIE_COLOR).setVisible(true)
break;
case 2:
this.cross.setVisible(true)
break
case 3:
this.pie.setAngle(180).fill('#d81e06').setVisible(true)
break
case 4:
this.skip.setVisible(true)
this.pie.setAngle(360).fill('#fff').setVisible(true)
break
}
}
});
......@@ -102,14 +137,14 @@ define(function(require, exports, module) {
*/
var ProgressCommand = kity.createClass('ProgressCommand', {
base: Command,
execute: function(km, value) {
execute: function (km, value) {
var nodes = km.getSelectedNodes();
for (var i = 0; i < nodes.length; i++) {
nodes[i].setData(PROGRESS_DATA, value || null).render();
}
km.layout();
},
queryValue: function(km) {
queryValue: function (km) {
var nodes = km.getSelectedNodes();
var val;
for (var i = 0; i < nodes.length; i++) {
......@@ -119,7 +154,7 @@ define(function(require, exports, module) {
return val || null;
},
queryState: function(km) {
queryState: function (km) {
return km.getSelectedNodes().length ? 0 : -1;
}
});
......@@ -132,15 +167,15 @@ define(function(require, exports, module) {
left: kity.createClass('ProgressRenderer', {
base: Renderer,
create: function(node) {
create: function (node) {
return new ProgressIcon();
},
shouldRender: function(node) {
shouldRender: function (node) {
return node.getData(PROGRESS_DATA);
},
update: function(icon, node, box) {
update: function (icon, node, box) {
var data = node.getData(PROGRESS_DATA);
var spaceLeft = node.getStyle('space-left');
var x, y;
......
define(function(require, exports, module) {
define(function (require, exports, module) {
var kity = require('../core/kity');
var data = require('../core/data');
var Promise = require('../core/promise');
......@@ -6,9 +6,9 @@ define(function(require, exports, module) {
var DomURL = window.URL || window.webkitURL || window;
function loadImage(info, callback) {
return new Promise(function(resolve, reject) {
return new Promise(function (resolve, reject) {
var image = document.createElement("img");
image.onload = function() {
image.onload = function () {
resolve({
element: this,
x: info.x,
......@@ -17,7 +17,7 @@ define(function(require, exports, module) {
height: info.height
});
};
image.onerror = function(err) {
image.onerror = function (err) {
reject(err);
};
......@@ -42,8 +42,8 @@ define(function(require, exports, module) {
var blob = xmlHttp.response;
var image = document.createElement('img');
image.src = DomURL.createObjectURL(blob);
image.src = DomURL.createObjectURL(blob);
image.onload = function () {
DomURL.revokeObjectURL(image.src);
resolve({
......@@ -82,7 +82,8 @@ define(function(require, exports, module) {
renderContainer.translate(-renderBox.x, -renderBox.y);
// 获取当前的 XML 代码
svgXml = paper.container.innerHTML;
// svgXml = paper.container.innerHTML;
svgXml = paper.node.outerHTML;
// 回复原始变换及位置
renderContainer.translate(renderBox.x, renderBox.y);
......@@ -112,6 +113,8 @@ define(function(require, exports, module) {
// @ http://stackoverflow.com/questions/30273775/namespace-prefix-ns1-for-href-on-tagelement-is-not-defined-setattributens
svgXml = svgXml.replace(/NS\d+:title/gi, 'xlink:title');
svgXml = svgXml.replace(/<image .*?><\/image>/gi, '')
blob = new Blob([svgXml], {
type: 'image/svg+xml'
});
......@@ -127,7 +130,7 @@ define(function(require, exports, module) {
function traverse(node) {
var nodeData = node.data;
if (nodeData.image) {
minder.renderNode(node);
var nodeData = node.data;
......@@ -183,8 +186,8 @@ define(function(require, exports, module) {
var svgInfo = getSVGInfo(minder);
var width = option && option.width && option.width > svgInfo.width ? option.width : svgInfo.width;
var height = option && option.height && option.height > svgInfo.height ? option.height : svgInfo.height;
var offsetX = option && option.width && option.width > svgInfo.width ? (option.width - svgInfo.width)/2 : 0;
var offsetY = option && option.height && option.height > svgInfo.height ? (option.height - svgInfo.height)/2 : 0;
var offsetX = option && option.width && option.width > svgInfo.width ? (option.width - svgInfo.width) / 2 : 0;
var offsetY = option && option.height && option.height > svgInfo.height ? (option.height - svgInfo.height) / 2 : 0;
var svgDataUrl = svgInfo.dataUrl;
var imagesInfo = svgInfo.imagesInfo;
......@@ -215,34 +218,36 @@ define(function(require, exports, module) {
// 加载节点上的图片
function loadImages(imagesInfo) {
var imagePromises = imagesInfo.map(function(imageInfo) {
return xhrLoadImage(imageInfo);
var imagePromises = imagesInfo.map(function (imageInfo) {
// return xhrLoadImage(imageInfo);
return loadImage(imageInfo);
});
return Promise.all(imagePromises);
}
function drawSVG() {
var svgData = {url: svgDataUrl};
var svgData = { url: svgDataUrl };
return loadImage(svgData).then(function($image) {
return loadImage(svgData).then(function ($image) {
drawImage(ctx, $image.element, offsetX, offsetY, $image.width, $image.height);
return loadImages(imagesInfo);
}).then(function($images) {
for(var i = 0; i < $images.length; i++) {
}).then(function ($images) {
for (var i = 0; i < $images.length; i++) {
drawImage(ctx, $images[i].element, $images[i].x + offsetX, $images[i].y + offsetY, $images[i].width, $images[i].height);
}
DomURL.revokeObjectURL(svgDataUrl);
document.body.appendChild(canvas);
var pngBase64 = generateDataUrl(canvas);
document.body.removeChild(canvas);
return pngBase64;
}, function(err) {
}, function (err) {
// 这里处理 reject,出错基本上是因为跨域,
// 出错后依然导出,只不过没有图片。
alert('脑图的节点中包含跨域图片,导出的 png 中节点图片不显示,你可以替换掉这些跨域的图片并重试。');
console.warn('error: ', err)
console.warn('脑图的节点中包含跨域图片,导出的 png 中节点图片不显示,你可以替换掉这些跨域的图片并重试。');
DomURL.revokeObjectURL(svgDataUrl);
document.body.appendChild(canvas);
......@@ -253,8 +258,8 @@ define(function(require, exports, module) {
}
if (bgUrl) {
var bgInfo = {url: bgUrl[1]};
return loadImage(bgInfo).then(function($image) {
var bgInfo = { url: bgUrl[1] };
return loadImage(bgInfo).then(function ($image) {
fillBackground(ctx, ctx.createPattern($image.element, "repeat"));
return drawSVG();
});
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment