add viewer spliter

README.md

@@ -21,6 +21,12 @@ git clone https://github.com/kekee000/fonteditor-core
 node ./build/build-index.js
 ```
 
+* `less`文件修改之后使用如下脚本编译：
+
+```
+node ./build/build-css.js
+```
+
 * 使用`edp`对fonteditor进行调试
 
 

css/main.less

@@ -5,6 +5,7 @@
 @import './widget/loading.less';
 @import './widget/project.less';
 @import './widget/glyf-list.less';
+@import './widget/glyf-spliter.less';
 @import './widget/editor.less';
 @import './widget/glyf-editor.less';
 @import './widget/dialog.less';

css/widget/glyf-spliter.less

@@ -0,0 +1,5 @@
+.main .spliter {
+    position: absolute;
+    height: 80%;
+    width: 6px;
+}

css/widget/page.less

@@ -18,8 +18,8 @@
         background: url(../img/logo.png) no-repeat;
         background-color: #fff;
         background-position: center;
-        background-image: url(../img/logo@1x.png);
+        background-image: url(./img/logo@1x.png);
-        background-image: -webkit-image-set(url(../img/logo@1x.png) 1x, url(../img/logo@2x.png) 2x);
+        background-image: -webkit-image-set(url(../img/logo@1x.png) 1x, url(./img/logo@2x.png) 2x);
         background-repeat: no-repeat;
     }
 

css/widget/project.less

@@ -10,8 +10,7 @@
     }
 
     .btn:last-child {
-        float: right;
+        margin-left: 10px;
-        margin-right: 0;
     }
 }
 

index.tpl

@@ -109,6 +109,7 @@
     </section>
 
     <section class="main">
+        <div id="glyf-list-spliter" class="spliter"></div>
         <ul id="glyf-list-commandmenu" class="command-groups"></ul>
         <div id="glyf-list-pager" class="pager"></div>
         <div id="glyf-list" class="glyf-list"></div>

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', {
-                        me.fire('resize', {
+                        size: size,
-                            size: size,
+                        prevSize: prevSize
-                            prevSize: prevSize
+                    });
-                        });
-                    }
                 });
             }
         }