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

.jsbeautifyrc

@@ -2,7 +2,7 @@
     "indent_with_tabs": false,
     "preserve_newlines": true,
     "max_preserve_newlines": 4,
-    "space_in_paren": true,
+    "space_in_paren": false,
     "jslint_happy": true,
     "brace_style": "collapse",
     "keep_array_indentation": false,

.jshintrc

@@ -7,6 +7,7 @@
     "trailing" : true,
     "white": false,
     "quotmark": false,
+    "browser": true,
     "predef" : [
         "module",
         "require",

LICENSE

-Copyright (c) 2014, FEX,Baidu.
+Copyright (c) 2014, FEX, Baidu.
 All rights reserved.
 
 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:
   this list of conditions and the following disclaimer in the documentation
   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
   this software without specific prior written permission.
 

dialogs/image/image.js

+( 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

dialogs/resource/resource.js

+(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

import.js

@@ -23,6 +23,8 @@
             ,'module/geometry.js'
             ,'module/history.js'
             ,'module/icon.js'
+            ,'module/image.js'
+            ,'module/resource.js'
             ,'module/layout.js'
             ,'module/layout.default.js'
             ,'module/layout.bottom.js'
@@ -72,6 +74,7 @@
             ,'adapter/contextmenu.js'
             ,'adapter/dialog.js'
             ,'adapter/hyperlink.js'
+            ,'adapter/image.js'
             ,'adapter/zoom.js'
             ,'protocal/xmind.js'
             ,'protocal/freemind.js'

index.html

@@ -53,7 +53,7 @@
     </div>
     
     <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/issues/new" target="_blank">Bug</a> | 
         <a href="mailto:kity@baidu.com" target="_blank">Contact Us</a>

kity @ bfe31680

-Subproject commit 256dce28fb1e574b18f0dd084f7503cbc25e2a80
+Subproject commit bfe316800ce4c78e0072d03404f0a364ae30ff0d

kityminder.config.js

@@ -63,7 +63,7 @@
         'KITYMINDER_HOME_URL': getKMBasePath(),
         //定义工具栏
         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
         //readOnly: true
@@ -89,5 +89,10 @@
         // }
         //配置放大缩小的比例
         //,zoom:[50,80,100,120,150,200]
+        //
+        //图片尺寸限制
+        //,maxImageWidth: 200
+        //,maxImageHeight: 200
+        //
     };
 } )();
\ No newline at end of file

lang/zh-cn/zh-cn.js

@@ -15,9 +15,11 @@ KityMinder.LANG[ 'zh-cn' ] = {
         'hand': '允许拖拽',
         'zoom': '放大缩小',
         'markers': '添加标签',
+        'resource': '分配资源',
         'switchlayout': '切换主题',
         'help': '帮助',
         'preference': '偏好设置',
+        'image': '插入图片',
         'hyperlink': '插入链接',
         'unhyperlink': "删除链接",
         'expandnode': "展开节点",
@@ -48,7 +50,10 @@ KityMinder.LANG[ 'zh-cn' ] = {
         'help': {
 
         },
-        hyperlink: {}
+        'hyperlink': {},
+        'image': {},
+        'resource': {
+        }
     },
     'node': {
         'appendsiblingnode': '插入同级节点',
@@ -63,6 +68,10 @@ KityMinder.LANG[ 'zh-cn' ] = {
     'hyperlink':{
         'hyperlink':'插入超链接',
         'unhyperlink':"取消超链接"
+    },
+    'image':{
+        'image': '插入图片',
+        'removeimage': '删除图片'
     }
 
 };
\ No newline at end of file

src/adapter/button.js

-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 ) {
         var me = this;
         var $btn = $.kmuibutton( {

src/adapter/dialog.js

-KM.registerToolbarUI( 'markers help preference', function ( name ) {
+KM.registerToolbarUI( 'markers help preference resource', function ( name ) {
 
     var me = this,
         currentRange, $dialog,
@@ -35,8 +35,6 @@ KM.registerToolbarUI( 'markers help preference', function ( name ) {
         } ).attachTo( $btn )
     } );
 
-
-
     me.on( 'interactchange', function () {
         var state = this.queryCommandState( name );
         $btn.kmui().disabled( state == -1 ).active( state == 1 )

src/adapter/image.js

+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

src/core/minder.event.js

@@ -63,7 +63,7 @@ kity.extendClass( Minder, {
             }
             minder._fire( new MinderEvent( 'preinteractchange' ) );
             minder._fire( new MinderEvent( 'interactchange' ) );
-        }, 300 );
+        }, 20 );
     },
     _listen: function ( type, callback ) {
         var callbacks = this._eventCallbacks[ type ] || ( this._eventCallbacks[ type ] = [] );

src/module/hyperlink.js

@@ -9,14 +9,14 @@ KityMinder.registerModule( "hyperlink", function () {
                     var nodes = km.getSelectedNodes();
                     utils.each( nodes, function ( i, n ) {
                         n.setData( 'hyperlink', url );
-                        km.updateLayout( n )
-                    } )
+                        km.updateLayout( n );
+                    } );
 
                 },
                 queryState: function ( km ) {
                     var nodes = km.getSelectedNodes(),
                         result = 0;
-                    if ( nodes.length == 0 ) {
+                    if ( nodes.length === 0 ) {
                         return -1;
                     }
                     utils.each( nodes, function ( i, n ) {
@@ -39,13 +39,13 @@ KityMinder.registerModule( "hyperlink", function () {
                     var nodes = km.getSelectedNodes();
                     utils.each( nodes, function ( i, n ) {
                         n.setData( 'hyperlink' );
-                        km.updateLayout( n )
-                    } )
+                        km.updateLayout( n );
+                    } );
                 },
                 queryState: function ( km ) {
                     var nodes = km.getSelectedNodes();
 
-                    if ( nodes.length == 0 ) {
+                    if ( nodes.length === 0 ) {
                         return -1;
                     }
                     var link = false;
@@ -56,7 +56,7 @@ KityMinder.registerModule( "hyperlink", function () {
                         }
                     } );
                     if ( link ) {
-                        return 0
+                        return 0;
                     }
                     return -1;
                 }
@@ -65,17 +65,27 @@ KityMinder.registerModule( "hyperlink", function () {
         "events": {
             "RenderNodeRight": function ( e ) {
                 var node = e.node,
-                    url;
-                if ( url = node.getData( 'hyperlink' ) ) {
+                    url = node.getData( 'hyperlink' );
+                if ( url ) {
                     var link = new kity.HyperLink( url );
                     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 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.setTarget( '_blank' );
                     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)');
+                    });
 
                 }
             }

src/module/image.js

+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

src/module/resource.js

+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

themes/default/css/buttonicon.css

@@ -14,6 +14,12 @@
 .kmui-btn-toolbar .kmui-btn .kmui-icon-font, .kmui-btn-toolbar .kmui-btn .kmui-icon-forecolor {
     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 {
     background: url(../images/hand.png) no-repeat 2px 2px;
 }
@@ -41,10 +47,12 @@
 .kmui-btn-toolbar .kmui-btn .kmui-icon-collapsenode {
     background: url(../images/contract.png) no-repeat 2px 2px;
 }
-
 .kmui-btn-toolbar .kmui-btn .kmui-icon-hyperlink {
     background: url(../images/link.png) no-repeat 2px 2px;
 }
 .kmui-btn-toolbar .kmui-btn .kmui-icon-unhyperlink {
     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

themes/default/css/dialog.css

@@ -7,6 +7,25 @@
     border-radius: 5px;
     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 {
     padding: 5px 10px;
     border-bottom: 1px solid #eee;

themes/default/css/import.css

@@ -13,4 +13,5 @@
 @import "separator.css";
 @import "markers.css";
 @import "help.css";
-@import "dropmenu.css";
\ No newline at end of file
+@import "dropmenu.css";
+@import "resource.dialog.css"
\ No newline at end of file

themes/default/css/resource.dialog.css

+.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}

themes/default/css/resource.dialog.less

+.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