添加资源功能

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

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

@@ -24,6 +24,7 @@
             ,'module/history.js'
             ,'module/icon.js'
             ,'module/image.js'
+            ,'module/resource.js'
             ,'module/layout.js'
             ,'module/layout.default.js'
             ,'module/layout.bottom.js'

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 image removeimage | 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

lang/zh-cn/zh-cn.js

@@ -15,6 +15,7 @@ KityMinder.LANG[ 'zh-cn' ] = {
         'hand': '允许拖拽',
         'zoom': '放大缩小',
         'markers': '添加标签',
+        'resource': '分配资源',
         'switchlayout': '切换主题',
         'help': '帮助',
         'preference': '偏好设置',
@@ -50,7 +51,9 @@ KityMinder.LANG[ 'zh-cn' ] = {
 
         },
         'hyperlink': {},
-        'image': {}
+        'image': {},
+        'resource': {
+        }
     },
     'node': {
         'appendsiblingnode': '插入同级节点',

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/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/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

@@ -47,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

@@ -14,3 +14,4 @@
 @import "markers.css";
 @import "help.css";
 @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