add viewer spliter

src/fonteditor/controller/default.js

@@ -56,6 +56,7 @@ define(
          * @param {number} glyfIndex 字形索引
          */
         function showEditor(glyfIndex) {
+            var isEditorVisible = program.editor.isVisible();
 
             // 重置editor缩放
             var ttf = program.ttfManager.get();
@@ -65,7 +66,11 @@ define(
 
                 program.viewer.setMode('editor');
 
-                program.editor.show();
+                if (!isEditorVisible) {
+                    program.editor.show();
+                    program.spliter.enable();
+                    program.fire('editor-show');
+                }
 
                 // 调整显示级别
                 program.editor.setAxis(getEditingOpt(ttf));
@@ -101,6 +106,8 @@ define(
             $('.editor').removeClass('editing');
 
             program.editor && program.editor.hide();
+            program.spliter.disable();
+            program.fire('editor-hide');
             program.viewer.clearEditing();
             program.viewer.setMode('list');
             program.viewer.focus();
@@ -462,6 +469,34 @@ define(
             });
         }
 
+        function bindSpliter(program) {
+            var adjustEditor = function () {
+                var width = $('.editor').css('width');
+                if (width) {
+                    $('.main').css('margin-left', width);
+                }
+            };
+
+            program
+                .on('editor-show', function () {
+                    // 为了防止多次绑定导致bug，这里先释放一下
+                    program.editor.editor.render.resizeCapture.un('resize', adjustEditor);
+                    program.editor.editor.render.resizeCapture.on('resize', adjustEditor);
+                    adjustEditor();
+                })
+                .on('editor-hide', function () {
+                    program.editor.editor.render.resizeCapture.un('resize', adjustEditor);
+                    $('.main').css('margin-left', '');
+                });
+
+            program.spliter.disable()
+                .on('change', function (e) {
+                    var editor = $('.editor');
+                    editor.width(editor.width() + e.delta);
+                    program.editor.editor.render.resizeCapture.fire('resize', e);
+                });
+        }
+
         /**
          * 绑定项目列表
          *
@@ -640,11 +675,11 @@ define(
                 program = curProgram;
 
                 bindViewer(program);
+                bindSpliter(program);
                 bindttfManager(program);
                 bindProject(program);
                 bindProgram(program);
 
-
                 $('.close-editor').click(function () {
                     hideEditor();
                 });

src/fonteditor/main.js

@@ -9,6 +9,7 @@ define(
         var GLYFViewer = require('./widget/glyfviewer/GLYFViewer');
         var GLYFEditor = require('./widget/GLYFEditor');
         var ProjectViewer = require('./widget/ProjectViewer');
+        var Spliter = require('./widget/Spliter');
         var TTFManager = require('./widget/TTFManager');
         var Toolbar = require('./widget/Toolbar');
         var Pager = require('./widget/Pager');
@@ -87,6 +88,8 @@ define(
 
                 program.config = require('./config');
 
+                program.spliter = new Spliter($('#glyf-list-spliter'));
+
                 // glyf查看器命令组
                 var viewerCommandMenu = new Toolbar($('#glyf-list-commandmenu'), {
                     commands: require('./menu/viewer')

src/fonteditor/widget/Spliter.js

@@ -0,0 +1,81 @@
+/**
+ * @file 面板分割管理器
+ * @author mengke01(kekee000@gmail.com)
+ */
+
+define(function (require) {
+    var lang = require('common/lang');
+
+    function init(spliter) {
+        spliter.onMouseDown = function (e) {
+            spliter.deltaX = spliter.x = e.pageX;
+            spliter.cover.appendTo(document.body);
+            $(window).on('mousemove', onMouseMove)
+                .on('mouseup', onMouseUp);
+        };
+
+        var fireChange = lang.throttle(function (e) {
+            var offset = e.pageX - spliter.x;
+            var deltaX = e.pageX - spliter.deltaX;
+            spliter.deltaX = e.pageX;
+            if (deltaX) {
+                spliter.fire('change', {
+                    offset: offset,
+                    delta: deltaX
+                });
+            }
+        }, 200);
+        var onMouseMove = function (e) {
+            fireChange(e);
+        };
+
+        var onMouseUp = function (e) {
+            spliter.cover.remove();
+            fireChange(e);
+            $(window).off('mousemove', onMouseMove)
+                .off('mouseup', onMouseUp);
+        };
+
+        spliter.enable();
+    }
+
+    /**
+     * 面板分割管理器
+     *
+     * @constructor
+     * @param {HTMLElement} main 主元素
+     * @param {Object} options 参数
+     */
+    function Spliter(main) {
+        this.main = $(main);
+        var cover = '<div style="'
+            + 'position:fixed;z-index: 100;width: 100%;height: 100%;left:0;top:0;cursor:e-resize"></div>';
+        this.cover = $(cover);
+        init(this);
+    }
+
+    Spliter.prototype.enable = function () {
+        if (!this.isEnabled) {
+            this.isEnabled = true;
+            this.main.css('cursor', 'e-resize').on('mousedown', this.onMouseDown);
+        }
+        return this;
+    };
+
+    Spliter.prototype.disable = function () {
+        if (this.isEnabled) {
+            delete this.isEnabled;
+            this.main.css('cursor', '').off('mousedown', this.onMouseDown);
+        }
+        return this;
+    };
+
+    Spliter.prototype.dispose = function () {
+        this.disable();
+        this.cover.remove();
+        this.main = this.cover = null;
+    };
+
+    require('common/observable').mixin(Spliter.prototype);
+    return Spliter;
+});

src/render/Render.js

@@ -84,12 +84,10 @@ define(
                     me.painter.resetSize();
                     var size = me.painter.getSize();
 
-                    if (size.width !== prevSize.width || size.height !== prevSize.height) {
-                        me.fire('resize', {
-                            size: size,
-                            prevSize: prevSize
-                        });
-                    }
+                    me.fire('resize', {
+                        size: size,
+                        prevSize: prevSize
+                    });
                 });
             }
         }