stash

import.js

@@ -117,7 +117,6 @@
         'ui/fiox.js',
         'ui/doc.js',
         'ui/contextmenu.js',
-        'ui/nav.js',
 
         /* UI 组件 */
         'ui/widget/commandbutton.js',
@@ -129,6 +128,9 @@
         'ui/widget/netdiskfinder.js',
         'ui/widget/menutab.js',
 
+        /* 视野导航 */
+        'ui/nav.js',
+
         /* UI 菜单 */
         'ui/menu/menu.js',
         'ui/menu/header.js',
@@ -176,9 +178,9 @@
         'ui/ribbon/appearence/template.js',
         'ui/ribbon/appearence/theme.js',
         'ui/ribbon/appearence/layout.js',
+        'ui/ribbon/appearence/style.js',
         'ui/ribbon/appearence/font.js',
         'ui/ribbon/appearence/color.js',
-        'ui/ribbon/appearence/style.js',
 
         /* UI Ribbon「视图」面板 */
         'ui/ribbon/view/level.js'

kityminder.config.js

@@ -19,7 +19,7 @@
         lang: 'zh-cn',
         
         // 配置放大缩小的比例
-        zoom: [50, 80, 100, 120, 150, 200],
+        // zoom: [10, 20, 30, 50, 80, 100, 120, 150, 200],
 
         // 图片尺寸限制
         maxImageWidth: 200,

lang/zh-cn/zh-cn.js

@@ -12,7 +12,13 @@ KityMinder.LANG['zh-cn'] = {
         'fresh-green': '文艺绿',
         'fresh-blue': '天空蓝',
         'fresh-purple': '浪漫紫',
-        'fresh-pink': '脑残粉'
+        'fresh-pink': '脑残粉',
+        'fresh-red-compat': '紧凑红',
+        'fresh-soil-compat': '紧凑黄',
+        'fresh-green-compat': '紧凑绿',
+        'fresh-blue-compat': '紧凑蓝',
+        'fresh-purple-compat': '紧凑紫',
+        'fresh-pink-compat': '紧凑粉'
     },
     'maintopic': '中心主题',
     'topic': '分支主题',
@@ -51,7 +57,7 @@ KityMinder.LANG['zh-cn'] = {
 
         'tabs': {
             'idea': '思路',
-            'appearence': '展现',
+            'appearence': '外观',
             'view': '视图'
         },
 
@@ -145,7 +151,9 @@ KityMinder.LANG['zh-cn'] = {
         'node': '节点操作',
         'saveto': '另存为',
         'hand': '允许拖拽',
-        'zoom': '放大缩小',
+        'camera': '定位根节点',
+        'zoom-in': '放大',
+        'zoom-out': '缩小',
         'markers': '标签',
         'resource': '资源',
         'help': '帮助',
@@ -189,7 +197,8 @@ KityMinder.LANG['zh-cn'] = {
         'daysago': '{0} 天前',
         'longago': '很久之前',
 
-        'redirect': '您正在打开连接 {0}，百度脑图不能保证连接的安全性，是否要继续？'
+        'redirect': '您正在打开连接 {0}，百度脑图不能保证连接的安全性，是否要继续？',
+        'navigator': '导航器'
     },
     'popupcolor': {
         'clearColor': '清空颜色',

src/connect/bezier.js

@@ -14,7 +14,7 @@ KityMinder.registerConnectProvider('bezier', function(node, parent, connection)
         pi = node.getLayoutVertexIn();
 
     // 连线矢量和方向
-    var v = parent.getLayoutVector().normalize();
+    var v = parent.getLayoutVectorOut().normalize();
 
     var r = Math.round;
     var abs = Math.abs;

src/core/keymap.js

@@ -6,6 +6,12 @@ var keymap = KityMinder.keymap = (function(origin) {
             ret[key.toLowerCase()] = origin[key];
         }
     }
+    var aKeyCode = 65;
+    var aCharCode = 'a'.charCodeAt(0);
+
+    'abcdefghijklmnopqrstuvwxyz'.split('').forEach(function(letter) {
+        ret[letter] = aKeyCode + (letter.charCodeAt(0) - aCharCode);
+    });
     return ret;
 })({
     'Backspace': 8,
@@ -32,11 +38,11 @@ var keymap = KityMinder.keymap = (function(origin) {
     'Right': 39,
     'Down': 40,
 
-    'direction':{
-        37:1,
-        38:1,
-        39:1,
-        40:1
+    'direction': {
+        37: 1,
+        38: 1,
+        39: 1,
+        40: 1
     },
     'Insert': 45,
 
@@ -45,7 +51,7 @@ var keymap = KityMinder.keymap = (function(origin) {
     'NumLock': 144,
 
     'Cmd': 91,
-    'CmdFF':224,
+    'CmdFF': 224,
     'F2': 113,
     'F3': 114,
     'F4': 115,
@@ -53,29 +59,15 @@ var keymap = KityMinder.keymap = (function(origin) {
     '=': 187,
     '-': 189,
 
-    'b': 66,
-    'i': 73,
-    //回退
-    'z': 90,
-    'y': 89,
-
-    //复制粘贴
-    'v': 86,
-    'x': 88,
-    'c': 67,
-
-    's': 83,
-
-    'n': 78,
     '/': 191,
     '.': 190,
-    controlKeys:{
-        16:1,
-        17:1,
-        18:1,
-        20:1,
-        91:1,
-        224:1
+    controlKeys: {
+        16: 1,
+        17: 1,
+        18: 1,
+        20: 1,
+        91: 1,
+        224: 1
     },
     'notContentChange': {
         13: 1,
@@ -113,7 +105,6 @@ var keymap = KityMinder.keymap = (function(origin) {
         40: 1,
         13: 1,
         9: 1
-    },
-    'a':65
+    }
 
 });
\ No newline at end of file

src/core/preference.js

@@ -33,7 +33,7 @@ kity.extendClass( Minder, function(){
 
             removeItem: function ( key ) {
 
-                storage && storage.removeItem( key );
+                if (storage) storage.removeItem( key );
 
             }
 
@@ -61,14 +61,14 @@ kity.extendClass( Minder, function(){
             var data = LocalStorage.getLocalData(ROOTKEY);
             if(data){
                 data = JSON.parse(data);
-                return key ? data[key] : data
+                return key ? data[key] : data;
             }
             return null;
         },
         resetPreferences:function(pres){
             var str = pres ? JSON.stringify(pres) : '';
-            LocalStorage.saveLocalData(str)
+            LocalStorage.saveLocalData(str);
         }
-    }
+    };
 
 }() );
\ No newline at end of file

src/module/basestyle.js

@@ -83,7 +83,7 @@ KityMinder.registerModule('basestylemodule', function() {
                 }
             })
         },
-        shortcutKeys: {
+        commandShortcutKeys: {
             'bold': 'ctrl+b', //bold
             'italic': 'ctrl+i' //italic
         }

src/module/view.js

@@ -3,6 +3,10 @@ var ViewDragger = kity.createClass("ViewDragger", {
         this._minder = minder;
         this._enabled = false;
         this._bind();
+        var me = this;
+        this._minder.getViewDragger = function() {
+            return me;
+        };
     },
 
     isEnabled: function() {
@@ -17,11 +21,47 @@ var ViewDragger = kity.createClass("ViewDragger", {
     },
 
     move: function(offset, duration) {
-        if (!duration) {
-            this._minder.getRenderContainer().translate(offset.x | 0, offset.y | 0);
-        } else {
-            this._minder.getRenderContainer().fxTranslate(offset.x | 0, offset.y | 0, duration, 'easeOutCubic');
+        var minder = this._minder;
+
+        var targetPosition = this.getMovement().offset(offset);
+
+        this.moveTo(targetPosition, duration);
+    },
+
+    moveTo: function(position, duration) {
+
+        if (duration) {
+            var dragger = this;
+
+            this._minder.getRenderContainer().animate(new kity.Animator(
+                this.getMovement(),
+                position,
+                function(target, value) {
+                    dragger.moveTo(value);
+                }
+            ), duration, 'easeOutCubic');
+
+            return this;
         }
+
+        this._minder.getRenderContainer().setTranslate(position.round());
+        this._minder.fire('viewchange');
+    },
+
+    getMovement: function() {
+        var translate = this._minder.getRenderContainer().transform.translate;
+        return translate ? translate[0] : new kity.Point();
+    },
+
+    getView: function() {
+        var minder = this._minder;
+        var c = {
+            width: minder.getRenderTarget().clientWidth,
+            height: minder.getRenderTarget().clientHeight
+        };
+        var m = this.getMovement();
+        var box = new kity.Box(-m.x, -m.y, c.width, c.height);
+        return box;
     },
 
     _bind: function() {
@@ -121,6 +161,7 @@ KityMinder.registerModule('View', function() {
     var CameraCommand = kity.createClass('CameraCommand', {
         base: Command,
         execute: function(km, focusNode, duration) {
+
             focusNode = focusNode || km.getRoot();
             var viewport = km.getPaper().getViewPort();
             var offset = focusNode.getRenderContainer().getRenderBox('view');
@@ -226,8 +267,8 @@ KityMinder.registerModule('View', function() {
                         height: this.getRenderTarget().clientHeight
                     },
                     b = this._lastClientSize;
-                this.getRenderContainer().translate(
-                    (a.width - b.width) / 2 | 0, (a.height - b.height) / 2 | 0);
+                this._viewDragger.move(
+                    new kity.Point((a.width - b.width) / 2 | 0, (a.height - b.height) / 2 | 0));
                 this._lastClientSize = a;
             }
         }

src/module/zoom.js

@@ -58,6 +58,7 @@ KityMinder.registerModule('Zoom', function() {
             timeline.pause();
         }
         timeline = animator.start(minder, 300, 'easeInOutSine', function() {});
+        minder.fire('viewchange');
     }
 
     var ZoomCommand = kity.createClass('Zoom', {
@@ -74,7 +75,7 @@ KityMinder.registerModule('Zoom', function() {
             zoomMinder(minder, this.nextValue(minder));
         },
         queryState: function(minder) {
-            return (~this.nextValue(minder));
+            return +!this.nextValue(minder);
         },
         nextValue: function(minder) {
             var stack = minder.getOptions('zoom'),
@@ -93,7 +94,7 @@ KityMinder.registerModule('Zoom', function() {
             zoomMinder(minder, this.nextValue(minder));
         },
         queryState: function(minder) {
-            return (~this.nextValue(minder));
+            return +!this.nextValue(minder);
         },
         nextValue: function(minder) {
             var stack = minder.getOptions('zoom'),
@@ -117,24 +118,9 @@ KityMinder.registerModule('Zoom', function() {
             'zoom': ZoomCommand
         },
         events: {
-            'normal.keydown': function(e) {
-                var me = this;
-                var originEvent = e.originEvent;
-                var keyCode = originEvent.keyCode || originEvent.which;
-                if (keymap['='] == keyCode) {
-                    me.execCommand('zoom-in');
-                    e.stopPropagation();
-                    e.preventDefault();
-                }
-                if (keymap['-'] == keyCode) {
-                    me.execCommand('zoom-out');
-                    e.stopPropagation();
-                    e.preventDefault();
-
-                }
-            },
             'normal.mousewheel readonly.mousewheel': function(e) {
-                if (!e.originEvent.ctrlKey) return;
+                if (!e.originEvent.ctrlKey && !e.originEvent.metaKey) return;
+
                 var delta = e.originEvent.wheelDelta;
                 var me = this;
 
@@ -161,6 +147,11 @@ KityMinder.registerModule('Zoom', function() {
 
                 e.originEvent.preventDefault();
             }
+        },
+
+        commandShortcutKeys: {
+            'zoom-in': 'ctrl+=',
+            'zoom-out': 'ctrl+-'
         }
     };
 });
\ No newline at end of file

src/theme/fresh.js

@@ -3,7 +3,7 @@
         return kity.Color.createHSL(h, s, l);
     }
 
-    function generate(h) {
+    function generate(h, compat) {
         return {
             'background': '#fbfbfb',
 
@@ -11,19 +11,18 @@
             'root-background': hsl(h, 37, 60),
             'root-stroke': hsl(h, 37, 60),
             'root-font-size': 16,
-            'root-padding': [12, 24],
-            'root-margin': [30, 100],
+            'root-padding': compat ? [6, 12] : [12, 24],
+            'root-margin': compat ? 10 : [30, 100],
             'root-radius': 5,
             'root-space': 10,
 
-
             'main-color': 'black',
             'main-background': hsl(h, 33, 95),
             'main-stroke': hsl(h, 37, 60),
             'main-stroke-width': 1,
             'main-font-size': 14,
             'main-padding': [6, 20],
-            'main-margin': 20,
+            'main-margin': compat ? 8 : 20,
             'main-radius': 3,
             'main-space': 5,
 
@@ -31,9 +30,8 @@
             'sub-background': 'none',
             'sub-stroke': 'none',
             'sub-font-size': 12,
-            'sub-padding': [5, 10],
-            'sub-margin': [15, 20],
-            'sub-tree-margin': 30,
+            'sub-padding': compat ? [3, 5] : [5, 10],
+            'sub-margin': compat ? [4, 8] : [15, 20],
             'sub-radius': 5,
             'sub-space': 5,
 
@@ -67,9 +65,10 @@
         purple: 246,
         pink: 334
     };
-
-    for (var name in plans) {
+    var name;
+    for (name in plans) {
         KityMinder.registerTheme('fresh-' + name, generate(plans[name]));
+        KityMinder.registerTheme('fresh-' + name + '-compat', generate(plans[name], true));
     }
 
 })();
\ No newline at end of file

ui/menu/default.js

@@ -21,7 +21,9 @@ KityMinder.registerUI('menu/default', function (minder) {
         $save.$tabs.select(0); // 云存储
         $share.$tabs.select(0); // 当前脑图
         
-        $draft.openLast();
+        if ($draft.hasLast()) {
+            $draft.openLast();
+        }
         // $menu.show();
     });
 });
\ No newline at end of file

ui/menu/open/draft.js

@@ -143,6 +143,9 @@ KityMinder.registerUI('menu/open/draft', function(minder) {
     }
 
     return {
+        hasDraft: function() {
+            return draftList.length;
+        },
         openLast: function() {
             $ul.find('.draft-list-item').eq(0).click();
         }

ui/menu/save/netdisk.js

@@ -145,6 +145,8 @@ KityMinder.registerUI('menu/save/netdisk', function(minder) {
     }
 
     function setFileNameForNetDiskSource(doc) {
+        if (!fio.user.current()) return;
+
         var path = doc.path;
         var pathInfo = fio.file.anlysisPath(path);
 

ui/menu/share/share.js

@@ -316,7 +316,7 @@ KityMinder.registerUI('menu/share/share', function(minder) {
         var $list = $('<ul>')
             .attr('id', 'manage-share-list')
             .appendTo($manage_menu);
-
+        if (!list) return;
         list.forEach(function(share) {
             $list.append(buildShareItem(share));
         });

ui/nav.js

@@ -7,43 +7,164 @@
  * @copyright: Baidu FEX, 2014
  */
 
-KityMinder.registerUI('nav', function (minder) {
+KityMinder.registerUI('nav', function(minder) {
 
-    var $previewNavigator = $('<div>')
-        .addClass('preview-navigator')
-        .appendTo('#content-wrapper');
+    var $navBar = $('<div>').addClass('nav-bar').appendTo('#content-wrapper');
+    var $commandbutton = minder.getUI('widget/commandbutton');
 
-    var width = $previewNavigator.width();
-    var height = $previewNavigator.height();
-    var paper = new kity.Paper($previewNavigator[0]);
+    var $zoomIn = $commandbutton.generate('zoom-in').appendTo($navBar[0]);
+    var $zoomPan = createZoomPan().appendTo($navBar);
+    var $zoomOut = $commandbutton.generate('zoom-out').appendTo($navBar[0]);
 
-    paper.setWidth(width);
-    paper.setHeight(height);
+    var $previewNavigator = createViewNavigator();
 
-    var nodePath = paper.put(new kity.Path()).fill(minder.getStyle('root-background'));
-    var connectPath = paper.put(new kity.Path()).stroke(minder.getStyle('connect-color'));
+    var $hand = $commandbutton.generate('hand').appendTo($navBar[0]);
+    var $root = $commandbutton.generate('camera', function() {
+        minder.execCommand('camera', minder.getRoot(), 600);
+    }).appendTo($navBar[0]);
 
-    function preview() {
-        var view = minder.getRenderContainer().getBoundaryBox();
-        paper.setViewBox(view.x - 0.5, view.y - 0.5, view.width + 1, view.height + 1);
+    var $previewTrigger = createPreviewTrigger($previewNavigator).appendTo($navBar);
 
-        var nodePathData = [];
-        var connectPathData = [];
+    function createZoomPan() {
+        var $pan = $('<div>').addClass('zoom-pan');
+        var zoomStack = minder.getOptions('zoom');
+        var minValue = zoomStack[0];
+        var maxValue = zoomStack[zoomStack.length - 1];
+        var valueRange = maxValue - minValue;
 
-        minder.getRoot().traverse(function(node) {
-            var box = node.getLayoutBox();
-            nodePathData.push('M', box.x, box.y, 
-                'h', box.width, 'v', box.height,
-                'h', -box.width, 'z');
-            if (node.getConnection() && node.parent && node.parent.isExpanded()) {
-                connectPathData.push(node.getConnection().getPathData());
-                console.log(node, node.getConnection().getPathData());
+        function getHeight(value) {
+            return (100 - (value - minValue) / valueRange * 100) + '%';
+        }
+
+        var $origin = $('<div>')
+            .addClass('origin')
+            .appendTo($pan)
+            .css('top', getHeight(100));
+
+        var $indicator = $('<div>')
+            .addClass('indicator')
+            .appendTo($pan)
+            .css('top', getHeight(100));
+
+        minder.on('interactchange', function() {
+            var zoom = minder.queryCommandValue('zoom');
+            $indicator.animate({
+                'top': getHeight(zoom)
+            }, 100);
+        });
+
+        $origin.click(function() {
+            minder.execCommand('zoom', 100);
+        });
+
+        return $pan;
+    }
+
+    function createViewNavigator() {
+        var $previewNavigator = $('<div>')
+            .addClass('preview-navigator')
+            .appendTo('#content-wrapper');
+
+        var width = $previewNavigator.width();
+        var height = $previewNavigator.height();
+        var paper = new kity.Paper($previewNavigator[0]);
+
+        paper.setWidth(width);
+        paper.setHeight(height);
+
+        var nodePath = paper.put(new kity.Path());
+        var connectPath = paper.put(new kity.Path());
+        var currentView = paper.put(new kity.Rect(100, 100).stroke('red', '1%'));
+
+        minder.on('layout layoutallfinish', preview);
+        minder.on('viewchange', updateView);
+
+        var dragging = false;
+
+        paper.on('mousedown', function(e) {
+            dragging = true;
+            moveView(e.getPosition('top'), 200);
+        });
+
+        paper.on('mousemove', function(e) {
+            if (dragging) {
+                moveView(e.getPosition('top'));
             }
         });
 
-        nodePath.setPathData(nodePathData);
-        connectPath.setPathData(connectPathData);
+        $(window).on('mouseup', function() {
+            dragging = false;
+        });
+
+        function preview() {
+            var view = minder.getRenderContainer().getBoundaryBox();
+            var padding = 30;
+            paper.setViewBox(
+                view.x - padding - 0.5,
+                view.y - padding - 0.5,
+                view.width + padding * 2 + 1,
+                view.height + padding * 2 + 1);
+
+            var nodePathData = [];
+            var connectPathData = [];
+
+            minder.getRoot().traverse(function(node) {
+                var box = node.getLayoutBox();
+                nodePathData.push('M', box.x, box.y,
+                    'h', box.width, 'v', box.height,
+                    'h', -box.width, 'z');
+                if (node.getConnection() && node.parent && node.parent.isExpanded()) {
+                    connectPathData.push(node.getConnection().getPathData());
+                }
+            });
+
+            paper.setStyle('background', minder.getStyle('background'));
+
+            if (nodePathData.length) {
+                nodePath
+                    .fill(minder.getStyle('root-background'))
+                    .setPathData(nodePathData);
+            } else {
+                nodePath.setPathData(null);
+            }
+
+            if (connectPathData.length) {
+                connectPath
+                    .stroke(minder.getStyle('connect-color'), '0.5%')
+                    .setPathData(connectPathData);
+            } else {
+                connectPath.setPathData(null);
+            }
+        }
+
+        function updateView() {
+            var view = minder.getViewDragger().getView();
+            currentView.setBox(view);
+        }
+
+        function moveView(center, duration) {
+            var box = currentView.getBox();
+            center.x = -center.x;
+            center.y = -center.y;
+            minder.getViewDragger().moveTo(center.offset(box.width / 2, box.height / 2), duration);
+        }
+
+        return $previewNavigator;
+    }
+
+    function createPreviewTrigger($previewNavigator) {
+        var $trigger = $('<div>').addClass('command-button nav-trigger');
+        $trigger.append('<div class="fui-icon">');
+        $trigger.click(function() {
+            $trigger.toggleClass('active');
+            if ($trigger.hasClass('active')) {
+                $previewNavigator.show();
+            } else {
+                $previewNavigator.hide();
+            }
+        }).click();
+        $trigger.attr('title', minder.getLang('ui.navigator'));
+        return $trigger;
     }
 
-    minder.on('layoutallfinish', preview);
 });
\ No newline at end of file

ui/ribbon/tabs.js

@@ -9,7 +9,7 @@
 
 KityMinder.registerUI('ribbon/tabs', function(minder) {
     var $tab = new FUI.Tabs({
-        buttons: ['idea', 'appearence', 'view'].map(function(key) {
+        buttons: ['idea', 'appearence'/*, 'view'*/].map(function(key) {
             return minder.getLang('ui.tabs.' + key);
         })
     });

ui/theme/default/css/_nav.less

 .preview-navigator {
-    border: 1px solid #FC9C9C;
     background: white;
-    width: 200px;
-    height: 200px;
+    width: 180px;
+    height: 120px;
     position: absolute;
-    left: 20px;
-    bottom: 20px;
+    left: 45px;
+    bottom: 30px;
+    box-shadow: 0 0 5px rgba(0, 0, 0, .1);
+    border-radius: 0 2px 2px 0;
+    padding: 3px;
+    z-index: 9;
+}
+
+.nav-bar {
+    position: absolute;
+    width: 35px;
+    height: 240px;
+    padding: 5px 0;
+    left: 10px;
+    bottom: 10px;
+    background: @theme-color;
+    border-radius: 4px;
+    z-index: 10;
+    box-shadow: 3px 3px 10px rgba(0, 0, 0, .2);
+    
+    .command-button {
+        width: 35px;
+        height: 24px;
+        text-align: center;
+        line-height: 30px;
+        
+        .fui-label {
+            display: none;
+        }
+        
+        .fui-icon {
+            background: url(../images/icons.png);
+            width: 20px;
+            height: 20px;
+            margin: 2px auto;
+            display: block;
+        }
+        
+        &:hover {
+            background: lighten(@theme-color, 10%);
+        }
+        
+        &:active {
+            background: darken(@theme-color, 3%);
+        }
+        
+        &.active {
+            background: #5A6378;
+        }
+        
+        &.hand, &.nav-trigger, &.camera {
+            height: 25px;
+            margin: 3px 0;
+            .fui-icon {
+                margin: 0 auto;
+                width: 25px;
+                height: 25px;
+            }
+        }
+        
+        &.zoom-in .fui-icon {
+            background-position: 0 -730px;
+        }
+        
+        &.zoom-out .fui-icon {
+            background-position: 0 -750px;
+        }
+        
+        &.hand {
+            margin-top: 10px;
+            .fui-icon {
+                background-position: 0 -770px;
+            }
+            &.active .fui-icon {
+                background-position: 0 -795px;
+            }
+        }
+        
+        &.nav-trigger {
+            .fui-icon {
+                background-position: 0 -820px;
+            }
+            &.active .fui-icon {
+                background-position: 0 -845px;
+            }
+        }
+        
+        &.camera {
+            .fui-icon {
+                background-position: 0 -870px;
+            }
+            margin-bottom: 0;
+        }
+        
+    }
+    
+    .zoom-pan {
+        width: 2px;
+        height: 70px;
+        box-shadow: 0 1px #E50000;
+        position: relative;
+        background: white;
+        margin: 3px auto;
+        overflow: visible;
+        
+        .origin {
+            position: absolute;
+            width: 20px;
+            height: 8px;
+            left: -9px;
+            margin-top: -4px;
+            background: transparent;
+            
+            &:after {
+                content: ' ';
+                display: block;
+                width: 6px;
+                height: 2px;
+                background: white;
+                left: 7px;
+                top: 3px;
+                position: absolute;
+            }
+            
+            &:hover:after {
+                box-shadow: 0 0 5px rgba(255, 255, 255, 1);
+            }
+        }
+        
+        .indicator {
+            position: absolute;
+            width: 8px;
+            height: 8px;
+            left: -3px;
+            background: white;
+            border-radius: 100%;
+            margin-top: -4px;
+        }
+    }
 }
\ No newline at end of file

ui/theme/default/css/_public.less

@@ -197,7 +197,7 @@ input[type=url] {
     &.down,
     &.left,
     &.right {
-        text-indent: -1000px;
+        text-indent: -10000px;
         position: relative;
         width: 9px;
 

ui/theme/default/css/_resource_panel.less

@@ -2,7 +2,7 @@
     position: relative;
     & > .fui-input {
         width: 148px;
-        margin: 5px 0 0;
+        margin: 2px 0 0;
         vertical-align: middle;
     }
 

ui/theme/default/css/_tab.less

@@ -72,7 +72,7 @@
 #tab-container {
     position: absolute;
     top: @panel-height;
-    height: 89px;
+    height: 65px;
     left: 0;
     right: 0;
     background: white;
@@ -99,6 +99,7 @@
                 position: absolute;
                 bottom: 0;
                 top: auto;
+                display: none;
             }
             & > .fui-panel-content > .fui-label-panel-content {
                 padding: 5px;

ui/theme/default/css/_vars.less

 @panel-height: 40px;
-@main-menu-theme-color: hsl(0, 95%, 75%);
+@theme-color: hsl(0, 95%, 75%);
+@main-menu-theme-color: @theme-color;
 @main-menu-fore-color: #465468;
 @tab-hover: #5a6378;
 @tab-active: darken(@tab-hover, 10%);

ui/theme/default/css/_widgets.less

@@ -156,7 +156,7 @@
     width: 40px;
     height: 50px;
     display: inline-block;
-    margin-top: 5px;
+    margin-top: 2px;
     
     &:hover {
         border-color: @button-hover;
@@ -359,7 +359,7 @@
     list-style: none;
     background-color: #ffffff;
     border-radius: 0;
-    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
+    box-shadow: 0 1px 15px rgba(0, 0, 0, 0.3);
     background-clip: padding-box;
     font-family: Arial, "Heiti SC", "Microsoft Yahei";
     

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

@@ -777,7 +777,7 @@ input[type=url]:focus {
 .shortcut-key.down,
 .shortcut-key.left,
 .shortcut-key.right {
-  text-indent: -1000px;
+  text-indent: -10000px;
   position: relative;
   width: 9px;
 }
@@ -1006,7 +1006,7 @@ li {
   width: 40px;
   height: 50px;
   display: inline-block;
-  margin-top: 5px;
+  margin-top: 2px;
 }
 #tab-container .fui-button-menu:hover {
   border-color: #eff3fa;
@@ -1210,7 +1210,7 @@ li {
   list-style: none;
   background-color: #ffffff;
   border-radius: 0;
-  box-shadow: 0 1px 5px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 1px 15px rgba(0, 0, 0, 0.3);
   background-clip: padding-box;
   font-family: Arial, "Heiti SC", "Microsoft Yahei";
 }
@@ -1820,7 +1820,7 @@ body {
 #tab-container {
   position: absolute;
   top: 40px;
-  height: 89px;
+  height: 65px;
   left: 0;
   right: 0;
   background: white;
@@ -1853,6 +1853,7 @@ body {
   position: absolute;
   bottom: 0;
   top: auto;
+  display: none;
 }
 #tab-container > .fui-panel > .fui-panel-content > .fui-panel > .fui-panel-content > .fui-label-panel-content {
   padding: 5px;
@@ -2497,7 +2498,7 @@ body {
 }
 #resource-panel > .fui-panel-content > .fui-label-panel-content > .fui-input {
   width: 148px;
-  margin: 5px 0 0;
+  margin: 2px 0 0;
   vertical-align: middle;
 }
 #resource-panel > .fui-panel-content > .fui-label-panel-content > .fui-button {
@@ -3215,12 +3216,131 @@ div.right {
   background-position: 0 -300px;
 }
 .preview-navigator {
-  border: 1px solid #FC9C9C;
   background: white;
-  width: 200px;
-  height: 200px;
+  width: 180px;
+  height: 120px;
   position: absolute;
-  left: 20px;
-  bottom: 20px;
+  left: 45px;
+  bottom: 30px;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  border-radius: 0 2px 2px 0;
+  padding: 3px;
+  z-index: 9;
+}
+.nav-bar {
+  position: absolute;
+  width: 35px;
+  height: 240px;
+  padding: 5px 0;
+  left: 10px;
+  bottom: 10px;
+  background: #fc8383;
+  border-radius: 4px;
+  z-index: 10;
+  box-shadow: 3px 3px 10px rgba(0, 0, 0, 0.2);
+}
+.nav-bar .command-button {
+  width: 35px;
+  height: 24px;
+  text-align: center;
+  line-height: 30px;
+}
+.nav-bar .command-button .fui-label {
+  display: none;
+}
+.nav-bar .command-button .fui-icon {
+  background: url(../images/icons.png);
+  width: 20px;
+  height: 20px;
+  margin: 2px auto;
+  display: block;
+}
+.nav-bar .command-button:hover {
+  background: #fdb4b4;
+}
+.nav-bar .command-button:active {
+  background: #fb7474;
+}
+.nav-bar .command-button.active {
+  background: #5A6378;
+}
+.nav-bar .command-button.hand,
+.nav-bar .command-button.nav-trigger,
+.nav-bar .command-button.camera {
+  height: 25px;
+  margin: 3px 0;
+}
+.nav-bar .command-button.hand .fui-icon,
+.nav-bar .command-button.nav-trigger .fui-icon,
+.nav-bar .command-button.camera .fui-icon {
+  margin: 0 auto;
+  width: 25px;
+  height: 25px;
+}
+.nav-bar .command-button.zoom-in .fui-icon {
+  background-position: 0 -730px;
+}
+.nav-bar .command-button.zoom-out .fui-icon {
+  background-position: 0 -750px;
+}
+.nav-bar .command-button.hand {
+  margin-top: 10px;
+}
+.nav-bar .command-button.hand .fui-icon {
+  background-position: 0 -770px;
+}
+.nav-bar .command-button.hand.active .fui-icon {
+  background-position: 0 -795px;
+}
+.nav-bar .command-button.nav-trigger .fui-icon {
+  background-position: 0 -820px;
+}
+.nav-bar .command-button.nav-trigger.active .fui-icon {
+  background-position: 0 -845px;
+}
+.nav-bar .command-button.camera {
+  margin-bottom: 0;
+}
+.nav-bar .command-button.camera .fui-icon {
+  background-position: 0 -870px;
+}
+.nav-bar .zoom-pan {
+  width: 2px;
+  height: 70px;
+  box-shadow: 0 1px #E50000;
+  position: relative;
+  background: white;
+  margin: 3px auto;
+  overflow: visible;
+}
+.nav-bar .zoom-pan .origin {
+  position: absolute;
+  width: 20px;
+  height: 8px;
+  left: -9px;
+  margin-top: -4px;
+  background: transparent;
+}
+.nav-bar .zoom-pan .origin:after {
+  content: ' ';
+  display: block;
+  width: 6px;
+  height: 2px;
+  background: white;
+  left: 7px;
+  top: 3px;
+  position: absolute;
+}
+.nav-bar .zoom-pan .origin:hover:after {
+  box-shadow: 0 0 5px #ffffff;
+}
+.nav-bar .zoom-pan .indicator {
+  position: absolute;
+  width: 8px;
+  height: 8px;
+  left: -3px;
+  background: white;
+  border-radius: 100%;
+  margin-top: -4px;
 }
 /*# sourceMappingURL=default.all.css.map */
\ No newline at end of file

ui/topbar/search.js

@@ -9,6 +9,61 @@
 
 KityMinder.registerUI('topbar/search', function(minder) {
     var $search = $('<div id="search"><input type="search" /></div>').appendTo('#panel');
+    var $input = $search.find('input');
 
+    minder.addShortcut('ctrl+f', function() {
+        $input[0].focus();
+        $input[0].select();
+    });
+
+    $input.on('keydown', function(e) {
+        if (e.keyCode == 13) {
+            doSearch($input.val());
+        }
+        if (e.keyCode == 27) {
+            $input[0].blur();
+        }
+    });
+
+    var nodeSequence;
+
+    minder.on('contentchange', makeNodeSequence);
+
+    function makeNodeSequence() {
+        nodeSequence = [];
+        minder.getRoot().traverse(function(node) {
+            nodeSequence.push(node);
+        });
+    }
+
+    function doSearch(keyword) {
+        if (!/\S/.exec(keyword)) {
+            $input[0].focus();
+            $input[0].select();
+            return;
+        }
+
+        var newSearch = doSearch.lastKeyword != keyword;
+
+        doSearch.lastKeyword = keyword;
+
+        var startIndex = newSearch ? 0 : doSearch.lastIndex + 1 || 0;
+        var endIndex = startIndex + nodeSequence.length - 1;
+
+        for (var i = startIndex; i < endIndex; i++) {
+            var node = nodeSequence[i % nodeSequence.length];
+            var text = node.getText();
+            if (text.indexOf(keyword) != -1) {
+                setSearchResult(node);
+                doSearch.lastIndex = i;
+                break;
+            }
+        }
+
+        function setSearchResult(node) {
+            minder.select(node, true);
+            minder.execCommand('camera', node, 50);
+        }
+    }
     return $search;
 });
\ No newline at end of file

ui/topbar/user.js

@@ -33,7 +33,9 @@ KityMinder.registerUI('topbar/user', function(minder) {
     }).appendTo($userPanel[0]).hide();
 
     /* 用户菜单 */
-    var $userMenu = new FUI.PopupMenu().appendTo(document.getElementById('content-wrapper')).positionTo($userButton);
+    var $userMenu = new FUI.PopupMenu({
+        id: 'user-menu'
+    }).appendTo(document.getElementById('content-wrapper')).positionTo($userButton);
 
     var menu = $userMenu.getMenuWidget().show();
 
@@ -51,7 +53,7 @@ KityMinder.registerUI('topbar/user', function(minder) {
         var $button = $($userButton.getElement());
         $dom.offset({
             left: $button.offset().left - $dom.outerWidth() + $button.outerWidth() - 10,
-            top: $button.offset().top + $button.outerHeight() + 10
+            top: $button.offset().top + $button.outerHeight()
         });
     });