Commit 531bf0ea authored by campaign's avatar campaign

Merge remote-tracking branch 'origin/dev' into dev

parents f95f1796 a6ce4cf2
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
"indent_with_tabs": false, "indent_with_tabs": false,
"preserve_newlines": true, "preserve_newlines": true,
"max_preserve_newlines": 4, "max_preserve_newlines": 4,
"space_in_paren": true, "space_in_paren": false,
"jslint_happy": true, "jslint_happy": true,
"brace_style": "collapse", "brace_style": "collapse",
"keep_array_indentation": false, "keep_array_indentation": false,
......
...@@ -7,6 +7,7 @@ ...@@ -7,6 +7,7 @@
"trailing" : true, "trailing" : true,
"white": false, "white": false,
"quotmark": false, "quotmark": false,
"browser": true,
"predef" : [ "predef" : [
"module", "module",
"require", "require",
......
Copyright (c) 2014, FEX,Baidu. Copyright (c) 2014, FEX, Baidu.
All rights reserved. All rights reserved.
Redistribution and use in source and binary forms, with or without Redistribution and use in source and binary forms, with or without
...@@ -11,7 +11,7 @@ modification, are permitted provided that the following conditions are met: ...@@ -11,7 +11,7 @@ modification, are permitted provided that the following conditions are met:
this list of conditions and the following disclaimer in the documentation this list of conditions and the following disclaimer in the documentation
and/or other materials provided with the distribution. and/or other materials provided with the distribution.
* Neither the name of the {organization} nor the names of its * Neither the name of the KityMinder nor the names of its
contributors may be used to endorse or promote products derived from contributors may be used to endorse or promote products derived from
this software without specific prior written permission. this software without specific prior written permission.
......
( function ( utils ) {
var content = '<div class="image-content" style="padding:20px;width:360px;">';
content += '<style>';
content += '.kmui-dialog-<%= container %> input{';
content += 'width: 75%;';
content += 'padding: 6px 12px;';
content += 'font-size: 14px;';
content += 'line-height: 1.42857143;';
content += 'color: #555;';
content += 'background-color: #fff;';
content += 'background-image: none;';
content += 'border: 1px solid #ccc;';
content += 'border-radius: 4px; -webkit-box-shadow: inset 0 1px 1px rgba( 0, 0, 0, .075 );'
content += 'box-shadow: inset 0 1px 1px rgba( 0, 0, 0, .075 ); -webkit-transition: border-color ease-in-out .15s,';
content += 'box-shadow ease-in-out .15s;';
content += 'transition: border-color ease-in-out .15s,';
content += 'box-shadow ease-in-out .15s;';
content += '}';
content += '.kmui-dialog-<%= container %> input:focus{';
content += 'border-color: #66afe9;';
content += 'outline: 0;';
content += '-webkit-box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);';
content += 'box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);';
content += '}';
content += '.kmui-dialog-<%= container %> button{';
content += 'height:34px;';
content += 'line-height:34px;';
content += 'vertical-align:1px';
content += '}';
content += '</style>';
content += '<input id="image_href"/>';
content += '<button id="image_insert">插入</button>';
content += '<hr style="height: 0; border: none; border-top: 1px solid #ccc;">';
content += '<img id="image_preview" style="max-width: 360px;"/>';
content += '</div>';
KM.registerWidget( 'image', {
tpl: content,
initContent: function ( km ) {
var lang = km.getLang( 'dialogs.image' ),
html;
if ( lang ) {
html = $.parseTmpl( this.tpl, utils.extend( {
'container': 'image'
}, lang ) );
}
this.root().html( html );
},
initEvent: function ( km, $w ) {
$w.find( '#image_insert' ).on( 'click', function () {
km.execCommand( 'image', $w.find( '#image_href' ).val() );
$w.kmui().hide();
} );
$w.find( '#image_href' ).on( 'keydown', function ( e ) {
if ( e.keyCode === 13 ) {
km.execCommand( 'image', $w.find( '#image_href' ).val() );
$w.kmui().hide();
}
} ).on('input', function() {
$w.find('#image_preview').attr('src', $w.find( '#image_href' ).val());
});
var url = km.queryCommandValue( 'image' );
var $input = $w.find( '#image_href' );
$input.val( url || 'http://' );
if(url) $w.find('#image_preview').attr('src', url);
setTimeout( function () {
$input.focus();
} );
},
width: 400
} );
} )( KM.Utils );
\ No newline at end of file
(function (utils) {
KM.registerWidget('resource', {
tpl:
'<div class="resource-container">' +
'<div class="add-resource">' +
'<input type="text" /><button class="button">添加</button>' +
'<ul class="global-resource"></ul>' +
'</div>' +
'</div>' +
'<div class="no-selected">未选中节点</div>',
initContent: function (km, $w) {
var lang = km.getLang('dialogs.resource'),
html = $.parseTmpl(this.tpl, lang);
this.root().html(html);
},
initEvent: function (km, $w) {
var $container = $w.find('.resource-container');
var $noSelected = $w.find('.no-selected');
var $current = $w.find('.current-resource').hide();
var $addInput = $w.find('.add-resource input');
var $addButton = $w.find('.add-resource button');
var $global = $w.find('.global-resource');
function switchDisplay() {
if (!km.getSelectedNodes().length) {
$container.hide();
$noSelected.show();
} else {
$container.show();
$noSelected.hide();
}
}
function addResource() {
var resource = $addInput.val();
var origin = km.queryCommandValue('resource');
if (resource) {
origin.push(resource);
km.execCommand('resource', origin);
}
$addInput.val(null);
}
$addInput.on('keydown', function (e) {
if (e.keyCode == 13) addResource();
});
$addButton.click(addResource);
switchDisplay();
$global.delegate('input[type=checkbox]', 'change', function () {
km.execCommand('resource', $global.find('input[type=checkbox]:checked').map(function (index, chk) {
return $(chk).data('resource');
}).toArray());
});
km.on('interactchange', function (e) {
var resource = this.queryCommandValue("resource");
var used = this.getUsedResource();
switchDisplay();
$global.empty().append(used.map(function (name) {
var $li = $('<li></li>'),
$label = $('<label></label>').appendTo($li),
$chk = $('<input type="checkbox" />')
.data('resource', name)
.prop('checked', ~resource.indexOf(name))
.appendTo($label);
$label.append(name);
var color = km.getResourceColor(name);
return $li.css({
color: color.dec('l', 60).toString(),
backgroundColor: ~resource.indexOf(name) ? color : color.dec('a', 0.85).toRGBA()
});
}));
}).fire('interactchange');
},
width: 250
});
})(KM.Utils);
\ No newline at end of file
...@@ -23,6 +23,8 @@ ...@@ -23,6 +23,8 @@
,'module/geometry.js' ,'module/geometry.js'
,'module/history.js' ,'module/history.js'
,'module/icon.js' ,'module/icon.js'
,'module/image.js'
,'module/resource.js'
,'module/layout.js' ,'module/layout.js'
,'module/layout.default.js' ,'module/layout.default.js'
,'module/layout.bottom.js' ,'module/layout.bottom.js'
...@@ -72,6 +74,7 @@ ...@@ -72,6 +74,7 @@
,'adapter/contextmenu.js' ,'adapter/contextmenu.js'
,'adapter/dialog.js' ,'adapter/dialog.js'
,'adapter/hyperlink.js' ,'adapter/hyperlink.js'
,'adapter/image.js'
,'adapter/zoom.js' ,'adapter/zoom.js'
,'protocal/xmind.js' ,'protocal/xmind.js'
,'protocal/freemind.js' ,'protocal/freemind.js'
......
...@@ -53,7 +53,7 @@ ...@@ -53,7 +53,7 @@
</div> </div>
<p id="about"> <p id="about">
KityMinder <a id="km-version" href="https://github.com/fex-team/kityminder/blob/dev/CHANGELOG.md" target="blank"></a>, Powered by f-cube, <a href="http://fex.baidu.com" target="_blank">FEX</a> | KityMinder <a id="km-version" href="https://github.com/fex-team/kityminder/blob/dev/CHANGELOG.md" target="blank"></a> under <a href="https://raw.githubusercontent.com/fex-team/kityminder/dev/LICENSE" target="_blank">BSD License</a>. Powered by f-cube, <a href="http://fex.baidu.com" target="_blank">FEX</a> |
<a href="https://github.com/fex-team/kityminder.git" target="_blank">Source</a> <a href="https://github.com/fex-team/kityminder.git" target="_blank">Source</a>
<a href="https://github.com/fex-team/kityminder/issues/new" target="_blank">Bug</a> | <a href="https://github.com/fex-team/kityminder/issues/new" target="_blank">Bug</a> |
<a href="mailto:kity@baidu.com" target="_blank">Contact Us</a> <a href="mailto:kity@baidu.com" target="_blank">Contact Us</a>
......
Subproject commit 256dce28fb1e574b18f0dd084f7503cbc25e2a80 Subproject commit bfe316800ce4c78e0072d03404f0a364ae30ff0d
...@@ -63,7 +63,7 @@ ...@@ -63,7 +63,7 @@
'KITYMINDER_HOME_URL': getKMBasePath(), 'KITYMINDER_HOME_URL': getKMBasePath(),
//定义工具栏 //定义工具栏
toolbars: [ toolbars: [
'hand | zoom-in zoom zoom-out | collapsenode expandnode | undo redo | bold italic | fontfamily fontsize forecolor | saveto | hyperlink unhyperlink | markers | node | help' 'hand | zoom-in zoom zoom-out | collapsenode expandnode | undo redo | bold italic | fontfamily fontsize forecolor | saveto | hyperlink unhyperlink image removeimage | markers resource | node | help'
] ]
//只读模式,默认是false //只读模式,默认是false
//readOnly: true //readOnly: true
...@@ -89,5 +89,10 @@ ...@@ -89,5 +89,10 @@
// } // }
//配置放大缩小的比例 //配置放大缩小的比例
//,zoom:[50,80,100,120,150,200] //,zoom:[50,80,100,120,150,200]
//
//图片尺寸限制
//,maxImageWidth: 200
//,maxImageHeight: 200
//
}; };
} )(); } )();
\ No newline at end of file
...@@ -15,9 +15,11 @@ KityMinder.LANG[ 'zh-cn' ] = { ...@@ -15,9 +15,11 @@ KityMinder.LANG[ 'zh-cn' ] = {
'hand': '允许拖拽', 'hand': '允许拖拽',
'zoom': '放大缩小', 'zoom': '放大缩小',
'markers': '添加标签', 'markers': '添加标签',
'resource': '分配资源',
'switchlayout': '切换主题', 'switchlayout': '切换主题',
'help': '帮助', 'help': '帮助',
'preference': '偏好设置', 'preference': '偏好设置',
'image': '插入图片',
'hyperlink': '插入链接', 'hyperlink': '插入链接',
'unhyperlink': "删除链接", 'unhyperlink': "删除链接",
'expandnode': "展开节点", 'expandnode': "展开节点",
...@@ -48,7 +50,10 @@ KityMinder.LANG[ 'zh-cn' ] = { ...@@ -48,7 +50,10 @@ KityMinder.LANG[ 'zh-cn' ] = {
'help': { 'help': {
}, },
hyperlink: {} 'hyperlink': {},
'image': {},
'resource': {
}
}, },
'node': { 'node': {
'appendsiblingnode': '插入同级节点', 'appendsiblingnode': '插入同级节点',
...@@ -63,6 +68,10 @@ KityMinder.LANG[ 'zh-cn' ] = { ...@@ -63,6 +68,10 @@ KityMinder.LANG[ 'zh-cn' ] = {
'hyperlink':{ 'hyperlink':{
'hyperlink':'插入超链接', 'hyperlink':'插入超链接',
'unhyperlink':"取消超链接" 'unhyperlink':"取消超链接"
},
'image':{
'image': '插入图片',
'removeimage': '删除图片'
} }
}; };
\ No newline at end of file
KM.registerToolbarUI( 'bold italic redo undo unhyperlink expandnode collapsenode hand zoom-in zoom-out', KM.registerToolbarUI( 'bold italic redo undo unhyperlink removeimage expandnode collapsenode hand zoom-in zoom-out',
function ( name ) { function ( name ) {
var me = this; var me = this;
var $btn = $.kmuibutton( { var $btn = $.kmuibutton( {
......
KM.registerToolbarUI( 'markers help preference', function ( name ) { KM.registerToolbarUI( 'markers help preference resource', function ( name ) {
var me = this, var me = this,
currentRange, $dialog, currentRange, $dialog,
...@@ -35,8 +35,6 @@ KM.registerToolbarUI( 'markers help preference', function ( name ) { ...@@ -35,8 +35,6 @@ KM.registerToolbarUI( 'markers help preference', function ( name ) {
} ).attachTo( $btn ) } ).attachTo( $btn )
} ); } );
me.on( 'interactchange', function () { me.on( 'interactchange', function () {
var state = this.queryCommandState( name ); var state = this.queryCommandState( name );
$btn.kmui().disabled( state == -1 ).active( state == 1 ) $btn.kmui().disabled( state == -1 ).active( state == 1 )
......
KM.registerToolbarUI( 'image', function ( name ) {
var me = this,
currentRange, $dialog,
opt = {
title: this.getLang( 'tooltips' )[ name ] || '',
url: me.getOptions( 'KITYMINDER_HOME_URL' ) + 'dialogs/' + name + '/' + name + '.js'
};
var $btn = $.kmuibutton( {
icon: name,
title: this.getLang( 'tooltips' )[ name ] || ''
} );
//加载模版数据
utils.loadFile( document, {
src: opt.url,
tag: "script",
type: "text/javascript",
defer: "defer"
}, function () {
$dialog = $.kmuimodal( opt );
$dialog.attr( 'id', 'kmui-dialog-' + name ).addClass( 'kmui-dialog-' + name )
.find( '.kmui-modal-body' ).addClass( 'kmui-dialog-' + name + '-body' );
$dialog.kmui().on( 'beforeshow', function () {
var $root = this.root(),
win = null,
offset = null;
if ( !$root.parent()[ 0 ] ) {
me.$container.find( '.kmui-dialog-container' ).append( $root );
}
KM.setWidgetBody( name, $dialog, me );
} ).attachTo( $btn );
} );
me.addContextmenu( [ {
label: me.getLang( 'image.image' ),
exec: function (url) {
$dialog.kmui().show();
},
cmdName: 'image'
},{
label: me.getLang( 'image.removeimage' ),
exec: function () {
this.execCommand( 'removeimage' );
},
cmdName: 'removeimage'
}
]);
me.on( 'interactchange', function () {
var state = this.queryCommandState( name );
$btn.kmui().disabled( state == -1 ).active( state == 1 );
} );
return $btn;
} );
\ No newline at end of file
...@@ -63,7 +63,7 @@ kity.extendClass( Minder, { ...@@ -63,7 +63,7 @@ kity.extendClass( Minder, {
} }
minder._fire( new MinderEvent( 'preinteractchange' ) ); minder._fire( new MinderEvent( 'preinteractchange' ) );
minder._fire( new MinderEvent( 'interactchange' ) ); minder._fire( new MinderEvent( 'interactchange' ) );
}, 300 ); }, 20 );
}, },
_listen: function ( type, callback ) { _listen: function ( type, callback ) {
var callbacks = this._eventCallbacks[ type ] || ( this._eventCallbacks[ type ] = [] ); var callbacks = this._eventCallbacks[ type ] || ( this._eventCallbacks[ type ] = [] );
......
...@@ -9,14 +9,14 @@ KityMinder.registerModule( "hyperlink", function () { ...@@ -9,14 +9,14 @@ KityMinder.registerModule( "hyperlink", function () {
var nodes = km.getSelectedNodes(); var nodes = km.getSelectedNodes();
utils.each( nodes, function ( i, n ) { utils.each( nodes, function ( i, n ) {
n.setData( 'hyperlink', url ); n.setData( 'hyperlink', url );
km.updateLayout( n ) km.updateLayout( n );
} ) } );
}, },
queryState: function ( km ) { queryState: function ( km ) {
var nodes = km.getSelectedNodes(), var nodes = km.getSelectedNodes(),
result = 0; result = 0;
if ( nodes.length == 0 ) { if ( nodes.length === 0 ) {
return -1; return -1;
} }
utils.each( nodes, function ( i, n ) { utils.each( nodes, function ( i, n ) {
...@@ -39,13 +39,13 @@ KityMinder.registerModule( "hyperlink", function () { ...@@ -39,13 +39,13 @@ KityMinder.registerModule( "hyperlink", function () {
var nodes = km.getSelectedNodes(); var nodes = km.getSelectedNodes();
utils.each( nodes, function ( i, n ) { utils.each( nodes, function ( i, n ) {
n.setData( 'hyperlink' ); n.setData( 'hyperlink' );
km.updateLayout( n ) km.updateLayout( n );
} ) } );
}, },
queryState: function ( km ) { queryState: function ( km ) {
var nodes = km.getSelectedNodes(); var nodes = km.getSelectedNodes();
if ( nodes.length == 0 ) { if ( nodes.length === 0 ) {
return -1; return -1;
} }
var link = false; var link = false;
...@@ -56,7 +56,7 @@ KityMinder.registerModule( "hyperlink", function () { ...@@ -56,7 +56,7 @@ KityMinder.registerModule( "hyperlink", function () {
} }
} ); } );
if ( link ) { if ( link ) {
return 0 return 0;
} }
return -1; return -1;
} }
...@@ -65,17 +65,27 @@ KityMinder.registerModule( "hyperlink", function () { ...@@ -65,17 +65,27 @@ KityMinder.registerModule( "hyperlink", function () {
"events": { "events": {
"RenderNodeRight": function ( e ) { "RenderNodeRight": function ( e ) {
var node = e.node, var node = e.node,
url; url = node.getData( 'hyperlink' );
if ( url = node.getData( 'hyperlink' ) ) { if ( url ) {
var link = new kity.HyperLink( url ); var link = new kity.HyperLink( url );
var linkshape = new kity.Path(); var linkshape = new kity.Path();
var outline = new kity.Rect(24, 22, -2, -6, 4).fill('rgba(255, 255, 255, 0)');
var box = node.getContRc().getBoundaryBox(); var box = node.getContRc().getBoundaryBox();
var style = this.getCurrentLayoutStyle()[ node.getType() ]; var style = this.getCurrentLayoutStyle()[ node.getType() ];
linkshape.setPathData( linkShapePath ).fill( '#666' ).setTranslate( box.x + box.width + style.spaceLeft, -5 );
linkshape.setPathData( linkShapePath ).fill( '#666' );
link.setAttr('xlink:title', url);
link.addShape( outline );
link.addShape( linkshape ); link.addShape( linkshape );
link.setTarget( '_blank' ); link.setTarget( '_blank' );
link.setStyle( 'cursor', 'pointer' ); link.setStyle( 'cursor', 'pointer' );
node.getContRc().addShape( link ); node.getContRc().addShape( link.setTranslate( box.x + box.width + style.spaceLeft + 5, -5 ) );
link.on('mouseover', function() {
outline.fill('rgba(255, 255, 200, .8)');
}).on('mouseout', function() {
outline.fill('rgba(255, 255, 255, 0)');
});
} }
} }
......
KityMinder.registerModule( "image", function () {
function loadImageSize( url, callback ) {
var img = document.createElement( 'img' );
img.onload = function () {
callback( img.width, img.height );
};
img.onerror = function () {
callback( null );
};
img.src = url;
}
function fitImageSize( width, height, maxWidth, maxHeight ) {
var ratio = width / height,
fitRatio = maxWidth / maxHeight;
// 宽高比大于最大尺寸的宽高比,以宽度为标准适应
if ( ratio > fitRatio && width > maxWidth ) {
width = maxWidth;
height = maxWidth / ratio;
} else if(height > maxHeight) {
height = maxHeight;
width = maxHeight / ratio;
}
return {
width: width,
height: height
};
}
return {
"defaultOptions": {
"maxImageWidth": 200,
"maxImageHeight": 200
},
"commands": {
"image": kity.createClass( "ImageCommand", {
base: Command,
execute: function ( km, url ) {
var nodes = km.getSelectedNodes();
loadImageSize( url, function ( width, height ) {
if ( !width ) return;
utils.each( nodes, function ( i, n ) {
n.setData( 'image', url );
n.setData( 'imageWidth', width );
n.setData( 'imageHeight', height );
km.updateLayout( n );
} );
} );
},
queryState: function ( km ) {
var nodes = km.getSelectedNodes(),
result = 0;
if ( nodes.length === 0 ) {
return -1;
}
utils.each( nodes, function ( i, n ) {
if ( n && n.getData( 'image' ) ) {
result = 0;
return false;
}
} );
return result;
},
queryValue: function ( km ) {
var node = km.getSelectedNode();
return node.getData( 'image' );
}
} ),
"removeimage": kity.createClass( "RemoveImageCommand", {
base: Command,
execute: function ( km ) {
var nodes = km.getSelectedNodes();
utils.each( nodes, function ( i, n ) {
n.setData( 'image' );
km.updateLayout( n );
} );
},
queryState: function ( km ) {
var nodes = km.getSelectedNodes();
if ( nodes.length == 0 ) {
return -1;
}
var image = false;
utils.each( nodes, function ( i, n ) {
if ( n.getData( 'image' ) ) {
image = true;
return false;
}
} );
if ( image ) {
return 0;
}
return -1;
}
} )
},
"events": {
"RenderNodeTop": function ( e ) {
var node = e.node,
url = node.getData( 'image' );
var link, img, size, currentBox;
if ( url ) {
size = fitImageSize(
node.getData( 'imageWidth' ),
node.getData( 'imageHeight' ),
this.getOptions( 'maxImageWidth' ),
this.getOptions( 'maxImageHeight' ) );
img = new kity.Image( url, size.width, size.height );
link = new kity.HyperLink( url );
link.addShape( img );
link.setTarget( '_blank' );
link.setStyle( 'cursor', 'pointer' );
currentBox = node.getContRc().getBoundaryBox();
node.getContRc().addShape( link.setTranslate( 0, currentBox.y - size.height ) );
}
}
}
};
} );
\ No newline at end of file
KityMinder.registerModule('Resource', function () {
/**
* 自动使用的颜色序列
*/
var RESOURCE_COLOR_SERIES = [200, 51, 303, 75, 157, 0, 26, 254].map(function (h) {
return kity.Color.createHSL(h, 100, 85);
});
var RESOURCE_COLOR_OVERFLOW = kity.Color.createHSL(0, 0, 95);
/**
* 在 Minder 上拓展一些关于资源的支持接口
*/
kity.extendClass(Minder, {
/**
* 获取脑图中某个资源对应的颜色
*
* 如果存在同名资源,则返回已经分配给该资源的颜色,否则分配给该资源一个颜色,并且返回
*
* 如果资源数超过颜色序列数量,返回白色
*
* @param {String} resource 资源名称
* @return {Color}
*/
getResourceColor: function (resource) {
var colorMapping = this._getResourceColorIndexMapping();
var nextIndex;
if (!colorMapping.hasOwnProperty(resource)) {
// 找不到找下个可用索引
nextIndex = this._getNextResourceColorIndex();
colorMapping[resource] = nextIndex;
}
// 资源过多,找不到可用索引颜色,统一返回白色åå
return RESOURCE_COLOR_SERIES[colorMapping[resource]] || RESOURCE_COLOR_OVERFLOW;
},
/**
* 获得已使用的资源的列表
*
* @return {Array}
*/
getUsedResource: function () {
var mapping = this._getResourceColorIndexMapping();
var used = [],
resource;
for (resource in mapping) {
if (mapping.hasOwnProperty(resource)) {
used.push(resource);
}
}
return used;
},
/**
* 获取脑图下一个可用的资源颜色索引
*
* @return {int}
*/
_getNextResourceColorIndex: function () {
// 获取现有颜色映射
// resource => color_index
var colorMapping = this._getResourceColorIndexMapping();
var resource, used, i;
used = [];
// 抽取已经使用的值到 used 数组
for (resource in colorMapping) {
if (colorMapping.hasOwnProperty(resource)) {
used.push(colorMapping[resource]);
}
}
// 枚举所有的可用值,如果还没被使用,返回
for (i = 0; i < RESOURCE_COLOR_SERIES.length; i++) {
if (!~used.indexOf(i)) return i;
}
// 没有可用的颜色了
return -1;
},
// 获取现有颜色映射
// resource => color_index
_getResourceColorIndexMapping: function () {
return this._resourceColorMapping || (this._resourceColorMapping = {});
}
});
/**
* @class 设置资源的命令
*
* @example
*
* // 设置选中节点资源为 "张三"
* minder.execCommand('resource', ['张三']);
*
* // 添加资源 "李四" 到选中节点
* var resource = minder.queryCommandValue();
* resource.push('李四');
* minder.execCommand('resource', resource);
*
* // 清除选中节点的资源
* minder.execCommand('resource', null);
*/
var ResourceCommand = kity.createClass('ResourceCommand', {
base: Command,
execute: function (minder, resource) {
var nodes = minder.getSelectedNodes();
if (typeof (resource) == 'string') {
resource = [resource];
}
nodes.forEach(function (node) {
node.setData('resource', resource);
minder.updateLayout(node);
});
},
queryValue: function (minder) {
var nodes = minder.getSelectedNodes();
var resource = [];
nodes.forEach(function (node) {
var nodeResource = node.getData('resource');
if (!nodeResource) return;
nodeResource.forEach(function (name) {
if (!~resource.indexOf(name)) {
resource.push(name);
}
});
});
return resource;
},
queryState: function () {
return 0;
}
});
/**
* @class 资源的覆盖图形
*
* 该类为一个资源以指定的颜色渲染一个动态的覆盖图形
*/
var ResourceOverlay = kity.createClass('ResourceOverlay', {
base: kity.Group,
constructor: function (container, resourceName, color) {
this.callBase();
var paddingX = 8,
paddingY = 4,
borderRadius = 4;
var text, box, rect;
container.addShape(this);
text = new kity.Text()
.setContent(resourceName)
.setFontSize(12)
.setVerticalAlign('middle')
.setX(paddingX)
.fill(color.dec('l', 70));
this.addShape(text);
box = text.getBoundaryBox();
rect = new kity.Rect(
box.width + paddingX * 2,
box.height + paddingY * 2,
box.x - paddingX,
box.y - paddingY,
borderRadius);
rect.fill(color);
this.addShape(rect);
rect.bringRear();
}
});
return {
commands: {
'resource': ResourceCommand
},
events: {
'RenderNodeRight': function (e) {
var node = e.node;
var resource = node.getData('resource');
var content = node.getContRc();
var margin = 5;
var minder = this;
if (resource && resource.length) {
resource.forEach(function (name) {
var overlay = new ResourceOverlay(content, name, minder.getResourceColor(name));
var box = content.getBoundaryBox();
overlay.setTranslate(box.width + margin, 0);
});
}
}
}
};
});
\ No newline at end of file
...@@ -14,6 +14,12 @@ ...@@ -14,6 +14,12 @@
.kmui-btn-toolbar .kmui-btn .kmui-icon-font, .kmui-btn-toolbar .kmui-btn .kmui-icon-forecolor { .kmui-btn-toolbar .kmui-btn .kmui-icon-font, .kmui-btn-toolbar .kmui-btn .kmui-icon-forecolor {
background-position: -720px 1px; background-position: -720px 1px;
} }
.kmui-btn-toolbar .kmui-btn .kmui-icon-image {
background: url(../images/picture_add.png) no-repeat 2px 2px;
}
.kmui-btn-toolbar .kmui-btn .kmui-icon-removeimage {
background: url(../images/picture_delete.png) no-repeat 2px 2px;
}
.kmui-btn-toolbar .kmui-btn .kmui-icon-hand { .kmui-btn-toolbar .kmui-btn .kmui-icon-hand {
background: url(../images/hand.png) no-repeat 2px 2px; background: url(../images/hand.png) no-repeat 2px 2px;
} }
...@@ -41,10 +47,12 @@ ...@@ -41,10 +47,12 @@
.kmui-btn-toolbar .kmui-btn .kmui-icon-collapsenode { .kmui-btn-toolbar .kmui-btn .kmui-icon-collapsenode {
background: url(../images/contract.png) no-repeat 2px 2px; background: url(../images/contract.png) no-repeat 2px 2px;
} }
.kmui-btn-toolbar .kmui-btn .kmui-icon-hyperlink { .kmui-btn-toolbar .kmui-btn .kmui-icon-hyperlink {
background: url(../images/link.png) no-repeat 2px 2px; background: url(../images/link.png) no-repeat 2px 2px;
} }
.kmui-btn-toolbar .kmui-btn .kmui-icon-unhyperlink { .kmui-btn-toolbar .kmui-btn .kmui-icon-unhyperlink {
background: url(../images/unlink.png) no-repeat 2px 2px; background: url(../images/unlink.png) no-repeat 2px 2px;
}
.kmui-btn-toolbar .kmui-btn .kmui-icon-resource {
background: url(../images/resource.png) no-repeat 2px 2px;
} }
\ No newline at end of file
...@@ -7,6 +7,25 @@ ...@@ -7,6 +7,25 @@
border-radius: 5px; border-radius: 5px;
box-shadow: 3px 3px 8px rgba(0,0,0, .5); box-shadow: 3px 3px 8px rgba(0,0,0, .5);
} }
.kmui-modal input[type=text] {
width: 75%;
padding: 6px 12px;
font-size: 14px;
line-height: 1.42857143;
vertical-align: middle;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
box-shadow: inset 0 1px 1px rgba( 0, 0, 0, .075 );
-webkit-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
}
.kmui-modal input[type=text]:focus {
border-color: #66afe9;
outline: 0;
box-shadow: inset 0 1px 1px rgba(0,0,0,.075),0 0 8px rgba(102,175,233,.6);
}
.kmui-modal-header { .kmui-modal-header {
padding: 5px 10px; padding: 5px 10px;
border-bottom: 1px solid #eee; border-bottom: 1px solid #eee;
......
...@@ -13,4 +13,5 @@ ...@@ -13,4 +13,5 @@
@import "separator.css"; @import "separator.css";
@import "markers.css"; @import "markers.css";
@import "help.css"; @import "help.css";
@import "dropmenu.css"; @import "dropmenu.css";
\ No newline at end of file @import "resource.dialog.css"
\ No newline at end of file
.kmui-dialog-resource{width:300px}.kmui-dialog-resource .add-resource{padding:10px}.kmui-dialog-resource .add-resource input[type=text]{width:142px}
.kmui-dialog-resource .add-resource button{margin-right:0}
.kmui-dialog-resource .add-resource .global-resource{list-style:none;margin:0;padding:5px 0 0}.kmui-dialog-resource .add-resource .global-resource li{margin:0 10px 5px 0;display:inline-block;border-radius:5px}.kmui-dialog-resource .add-resource .global-resource li label{padding:4px 8px 4px 6px;display:block}
.kmui-dialog-resource .no-selected{padding:10px}
.kmui-dialog-resource {
width: 300px;
.add-resource {
padding: 10px;
input[type=text] {
width: 142px;
}
button {
margin-right: 0;
}
.global-resource {
list-style: none;
margin: 0;
padding: 5px 0 0;
li {
margin: 0 10px 5px 0;
display: inline-block;
label {
padding: 4px 8px 4px 6px;
display: block;
}
border-radius: 5px;
}
}
}
.no-selected {
padding: 10px;
}
}
\ No newline at end of file
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