outlineView

import.js

@@ -205,7 +205,8 @@
 
         /* UI Ribbon「视图」面板 */
         { path: 'ui/ribbon/view/fullscreen.js',         pack: 'edit' },
-        { path: 'ui/ribbon/view/level.js',              pack: 'edit' }
+        { path: 'ui/ribbon/view/level.js',              pack: 'edit' },
+        { path: 'ui/ribbon/view/outline.js',            pack: 'edit' }
     ];
 
     if (typeof(module) === 'object' && module.exports) {

lang/zh-cn/zh-cn.js

@@ -132,6 +132,7 @@ KityMinder.LANG['zh-cn'] = {
         'share_sync_success': '分享内容已同步',
 
         'fullscreen_exit_hint': '按 F11 退出全屏',
+        'outline_exit_hint':  '按 F12 退出大纲视图',
 
         'error_detail': '详细信息',
         'copy_and_feedback': '复制并反馈',
@@ -146,7 +147,8 @@ KityMinder.LANG['zh-cn'] = {
             'resetlayout': '整理布局',
             'expandtoleaf': '展开全部节点',
             'collapsetolevel1': '收起到一级节点',
-            'fullscreen': '全屏'
+            'fullscreen': '全屏',
+            'outline': '大纲'
         },
 
         'back': '返回',

src/core/node.js

@@ -141,7 +141,7 @@ var MinderNode = KityMinder.MinderNode = kity.createClass('MinderNode', {
     },
 
     /**
-     * 后序遍历当前节点树
+     * 后序遍历当前节点树if
      * @param  {Function} fn 遍历函数
      */
     postTraverse: function(fn, excludeThis) {

ui/ribbon/view/outline.js

+/**
+ * @fileOverview
+ *
+ * 大纲视图
+ *
+ * @author: yangxiaohu
+ * @copyright: Baidu FEX, 2014
+ */
+KityMinder.registerUI('ribbon/view/outline', function(minder) {
+
+    var $commandbutton = minder.getUI('widget/commandbutton');
+    var $tabs = minder.getUI('ribbon/tabs');
+    var notice = minder.getUI('widget/notice');
+
+    var $outlinePanel = new FUI.LabelPanel({
+        label: minder.getLang('panels.level'),
+        column: true
+    }).appendTo($tabs.view);
+
+    var $outlineButton = $commandbutton
+        .generate('outline', openDialog)
+        .addClass('large')
+        .appendTo($outlinePanel);
+
+    var $outlineDialog = new FUI.Dialog({
+        width: 180,
+        height: 260,
+        padding: 0,
+        layout: 'right-bottom',
+        mask: null,
+        buttons: [],
+        prompt: true,
+        caption: minder.getLang('ui.command.outline')
+    }).appendTo(document.getElementById('content-wrapper'));
+
+    $($outlineDialog.getFootElement()).hide();
+    $($outlineDialog.getBodyElement()).css('padding', '0px');
+
+    var $dialogBody = $($outlineDialog.getBodyElement());
+
+    var $outlineView = $('<div id="outlineView" class="outlineView"></div>').appendTo($dialogBody);
+
+    renderOutline();
+
+    function renderOutline() {
+        $('<ul>').append(createOutline(km.getRoot())).appendTo($outlineView.empty());
+    }
+
+    var liCount = 0;
+    function createOutline(tree) {
+        var children = tree.getChildren();
+        var html = '';
+        var title = tree.getText();
+
+        var $sign = $('<div>').addClass('sign').text('-');
+        var $text = $('<div>').text(title).addClass('text').data('text', tree);
+        var $li = $('<li>').append($text);
+
+        // $text.css('padding-left', tree.getLevel() * 12 + 'px');
+        liCount++;
+
+        if(liCount % 2) {
+            $li.addClass('odd');
+        }
+        if (children.length) {
+            var $ul = $('<ul>').appendTo($li).addClass('item-child');
+
+            $li.prepend($sign);
+            children.forEach(function(child) {
+                $ul.append(createOutline(child));
+            })
+        }
+
+        return $li;
+
+    }
+    var isFirst = true;
+    function openDialog() {
+        $outlineDialog.open();
+        if(isFirst) {
+            notice.info(minder.getLang('ui.outline_exit_hint'), false, 4000);
+        }
+        isFirst = false;
+    }
+
+    minder.addShortcut('F12', openDialog);
+    minder.on('contentchange', renderOutline);
+
+    $outlineView.delegate('div', 'click', function(e){
+        var node = $(e.target).closest('div').data('text');
+        minder.execCommand('camera', node, 500);
+        e.stopPropagation();
+    })
+
+    $outlineView.delegate('div.sign', 'click', function(e){
+        var $node = $(e.target);
+        if( $node.text() == '+') {
+            $node.text('-');
+        }
+        else {
+            $node.text('+');
+        }
+        $node.siblings('ul').fadeToggle();
+        e.stopPropagation();
+    })
+
+    return $outlineButton;
+});

ui/theme/default/css/_outline.less

+.outlineView {
+	display: block;
+	// right: 5px;
+	width: 180px;
+	height: 226px;
+	// top: 150px;
+	// border: 1px solid red;
+	overflow: auto;
+    // margin-left: auto;
+    // margin-right: auto;
+	font-size: 12px;
+}
+
+.outlineView ul, .outlineView li {
+	list-style: none;
+    padding-left: 7px;
+}
+
+// .outlineView ul {
+// 	padding: 0px;
+// }
+
+.outlineView > ul {
+    margin: 0px;
+    padding-left: 0px;
+}
+
+.outlineView li {
+	// padding-left: 12px;
+    // background: #a0a0a0;
+}
+
+.outlineView li.odd {
+    // background: #c0c0c0;
+}
+
+.outlineView li div {
+    // display: inline-block;
+}
+
+.outlineView li div.sign {
+    width: 12px;
+    height: 12px;
+    text-align: center;
+    line-height: 12px;
+    float: left;
+    border: 1px solid grey;
+}
+
+.outlineView li div.text {
+    // margin-left: 30px;
+    // background: #a0a0a0;
+    padding-left: 8px;
+}
+
+.outlineView div.text.text1{
+    background: #b0b0b0;
+}
+
+.outlineView li div.text:hover {
+    background: #555;
+}
+
+.outlineView ul.item-child {
+    display: block;
+}
+
+.outlineView ul.item-child.expand {
+    display: none;
+}
\ No newline at end of file

ui/theme/default/css/default.all.css

@@ -3673,4 +3673,43 @@ ul.resource-list li {
   border-radius: 100%;
   margin-top: -4px;
 }
+.outlineView {
+  display: block;
+  width: 180px;
+  height: 226px;
+  overflow: auto;
+  font-size: 12px;
+}
+.outlineView ul,
+.outlineView li {
+  list-style: none;
+  padding-left: 7px;
+}
+.outlineView > ul {
+  margin: 0px;
+  padding-left: 0px;
+}
+.outlineView li div.sign {
+  width: 12px;
+  height: 12px;
+  text-align: center;
+  line-height: 12px;
+  float: left;
+  border: 1px solid grey;
+}
+.outlineView li div.text {
+  padding-left: 8px;
+}
+.outlineView div.text.text1 {
+  background: #b0b0b0;
+}
+.outlineView li div.text:hover {
+  background: #555;
+}
+.outlineView ul.item-child {
+  display: block;
+}
+.outlineView ul.item-child.expand {
+  display: none;
+}
 /*# sourceMappingURL=default.all.css.map */
\ No newline at end of file

ui/theme/default/css/import.less

@@ -36,3 +36,5 @@
 @import "_share";
 @import "_icons";
 @import "_nav";
+
+@import "_outline";
\ No newline at end of file