From 652def46001a6fa7d8a9fe30711412ea69b098f1 Mon Sep 17 00:00:00 2001
From: mkwiser <kekee000@126com>
Date: Sat, 13 Sep 2014 16:52:51 +0800
Subject: [PATCH] =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=82=B9=E6=93=8D=E4=BD=9C?=
 =?UTF-8?q?=E6=A8=A1=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 demo/css/editor.css            |  47 ++++++++++
 demo/css/editor.less           |  37 ++++++++
 demo/editor.html               |   4 +-
 src/editor/Editor.js           |  68 +++++++++++---
 src/editor/group/ShapeGroup.js |   8 ++
 src/editor/main.js             |   7 +-
 src/editor/menu/ContextMenu.js | 141 +++++++++++++++++++++++++++++
 src/editor/menu/command.js     |  81 +++++++++++++++++
 src/editor/mode/bound.js       |  19 +---
 src/editor/mode/editorMode.js  |   4 +-
 src/editor/mode/point.js       | 157 ++++++++++++++++++++++++---------
 src/editor/mode/range.js       |  85 ++++++++++++++++++
 src/render/capture/Mouse.js    |  20 +++--
 src/ttf/util/contourAdjust.js  |   2 +-
 14 files changed, 597 insertions(+), 83 deletions(-)
 create mode 100644 demo/css/editor.css
 create mode 100644 demo/css/editor.less
 create mode 100644 src/editor/menu/ContextMenu.js
 create mode 100644 src/editor/menu/command.js
 create mode 100644 src/editor/mode/range.js
diff --git a/demo/css/editor.css b/demo/css/editor.css
new file mode 100644
index 0000000..529d6ad
--- /dev/null
+++ b/demo/css/editor.css
@@ -0,0 +1,47 @@
+* {
+  margin: 0;
+  padding: 0;
+}
+ul {
+  list-style: none;
+}
+a {
+  color: #03C;
+  text-decoration: none;
+}
+a:hover {
+  text-decoration: underline;
+}
+.hide {
+  display: none;
+}
+body,
+html {
+  height: 100%;
+}
+#render-view {
+  font-size: 12px;
+  width: 100%;
+  height: 100%;
+  position: relative;
+  -webkit-text-size-adjust: none;
+}
+#render-view .editor-contextmenu {
+  width: 120px;
+  border: 1px solid #999;
+  background: #FEFEFE;
+  line-height: 24px;
+  padding: 0 4px;
+  box-shadow: 1px 1px 1px #CCC;
+}
+#render-view .editor-contextmenu div {
+  padding-left: 10px;
+  cursor: pointer;
+  border-bottom: 1px solid #CCC;
+}
+#render-view .editor-contextmenu div:hover {
+  background: #EEE;
+}
+#render-view .editor-contextmenu div:last-child {
+  border-bottom: none;
+}
diff --git a/demo/css/editor.less b/demo/css/editor.less
new file mode 100644
index 0000000..d2142a1
--- /dev/null
+++ b/demo/css/editor.less
@@ -0,0 +1,37 @@
+@import './reset';
+
+body, html {
+    height: 100%;
+}
+
+#render-view {
+    font-size: 12px;
+    width: 100%;
+    height: 100%;
+    position: relative;
+    -webkit-text-size-adjust: none;
+
+    .editor-contextmenu {
+        width: 120px;
+        border: 1px solid #999;
+        background: #FEFEFE;
+        line-height: 24px;
+        padding: 0 4px;
+        box-shadow: 1px 1px 1px #CCC;
+
+        div {
+            padding-left: 10px;
+            cursor: pointer;
+            border-bottom: 1px solid #CCC;
+        }
+
+        div:hover {
+            background: #EEE;
+        }
+
+        div:last-child {
+            border-bottom: none;
+        }
+
+    }
+}
\ No newline at end of file
diff --git a/demo/editor.html b/demo/editor.html
index 90c04c4..30a65cc 100644
--- a/demo/editor.html
+++ b/demo/editor.html
@@ -5,7 +5,7 @@
     <title>测试render</title>
     <script src="./lib/esl.js"></script>
     <script src="./lib/jquery.min.js"></script>
-    <link rel="stylesheet" type="text/css" href="./css/render.css">
+    <link rel="stylesheet" type="text/css" href="./css/editor.css">
     <style id="font-face"></style>
 </head>
 <body>
@@ -19,7 +19,7 @@
         define('jquery', $);
     </script>
 
-    <div id="render-view" class="render-view"></div>
+    <div id="render-view" class="render-view" oncontextMenu="return false"></div>
 
     <script>
         require(['demo/editor']);
diff --git a/src/editor/Editor.js b/src/editor/Editor.js
index 7d362ed..bd72f20 100644
--- a/src/editor/Editor.js
+++ b/src/editor/Editor.js
@@ -13,6 +13,7 @@ define(
         var computeBoundingBox = require('graphics/computeBoundingBox');
         var pathAdjust = require('render/util/pathAdjust');
         var editorMode = require('./mode/editorMode');
+        var ContextMenu = require('./menu/ContextMenu');
 
         /**
          * 初始化
@@ -23,6 +24,10 @@ define(
 
             render.capture.on('wheel', function(e) {
 
+                if (me.contextMenu.visible()) {
+                    return;
+                }
+
                 var defaultRatio = render.options.defaultRatio || 1.2;
                 var ratio = e.delta > 0 ?  defaultRatio : 1 / defaultRatio;
 
@@ -40,16 +45,25 @@ define(
             });
 
             render.capture.on('down', function(e) {
+
+                if (me.contextMenu.visible()) {
+                    return;
+                }
+
                 render.camera.startx = e.x;
                 render.camera.starty = e.y;
                 render.camera.x = e.x;
                 render.camera.y = e.y;
                 render.camera.event = e;
-
                 me.mode.down && me.mode.down.call(me, e);
             });
 
             render.capture.on('dragstart', function(e) {
+
+                if (me.contextMenu.visible()) {
+                    return;
+                }
+
                 render.camera.x = e.x;
                 render.camera.y = e.y;
                 render.camera.event = e;
@@ -58,6 +72,11 @@ define(
             });
 
             render.capture.on('drag', function(e) {
+
+                if (me.contextMenu.visible()) {
+                    return;
+                }
+
                 render.camera.mx = e.x - render.camera.x;
                 render.camera.my = e.y - render.camera.y;
                 render.camera.x = e.x;
@@ -68,6 +87,11 @@ define(
             });
 
             render.capture.on('dragend', function(e) {
+
+                if (me.contextMenu.visible()) {
+                    return;
+                }
+
                 render.camera.x = e.x;
                 render.camera.y = e.y;
                 render.camera.event = e;
@@ -76,15 +100,20 @@ define(
             });
 
             render.capture.on('dblclick', function(e) {
-                me.mode.end.call(me, e);
+
+                if (me.contextMenu.visible()) {
+                    return;
+                }
+
                 if(me.mode === editorMode.bound) {
-                    me.mode = editorMode.point;
-                    
+                    me.setMode('point');
                 }
                 else if(me.mode === editorMode.point){
-                    me.mode = editorMode.bound;
+                    me.setMode('bound');
+                }
+                else {
+                    me.setMode('point');
                 }
-                me.mode.begin.call(me, e);
             });
 
         }
@@ -134,7 +163,7 @@ define(
          * @param {Object} options 参数
          * @constructor
          */
-        function Editor(options) {
+        function Editor(main, options) {
             this.options = lang.extend({
                 unitsPerEm: 512,
                 // 字体测量规格
@@ -143,8 +172,11 @@ define(
                     WinDecent: -33,
                     'x-Height': 256,
                     'CapHeight': 358
-                }
+                },
+                contextMenu: {}
             }, options);
+
+            this.contextMenu = new ContextMenu(main, this.options.contextMenu);
         }
 
         /**
@@ -201,14 +233,25 @@ define(
             
             this.render.refresh();
 
+            this.setMode();
+
+            return this;
+        };
+
+        /**
+         * 切换编辑模式
+         * 
+         * @param {string} modeName 模式名称
+         * @return {Editor} 本对象
+         */
+        Editor.prototype.setMode = function(modeName) {
+
             if (this.mode) {
                 this.mode.end.call(this);
             }
 
-            this.mode = editorMode.bound;
+            this.mode = editorMode[modeName] || editorMode['default'];
             this.mode.begin.call(this);
-
-            return this;
         };
 
         /**
@@ -223,8 +266,9 @@ define(
          * 注销
          */
         Editor.prototype.dispose = function() {
+            this.contextMenu.dispose();
             this.render && this.render.dispose();
-            this.options = this.render = null;
+            this.options = this.contextMenu = this.render = null;
         };
 
         return Editor;
diff --git a/src/editor/group/ShapeGroup.js b/src/editor/group/ShapeGroup.js
index ac81d1c..a8b17b3 100644
--- a/src/editor/group/ShapeGroup.js
+++ b/src/editor/group/ShapeGroup.js
@@ -111,6 +111,14 @@ define(
             pathAdjust(shape.points, matrix[2], matrix[3], -matrix[0], -matrix[1]);
             pathAdjust(shape.points, 1, 1, matrix[0], matrix[1]);
 
+            if (matrix[2] < 0 && !matrix[3] < 0) {
+                shape.points = shape.points.reverse();
+            }
+
+            if (matrix[3] < 0 && !matrix[2] < 0) {
+                shape.points = shape.points.reverse();
+            }
+
             lang.extend(this.shape, shape);
             this.render.getLayer('font').refresh();
 
diff --git a/src/editor/main.js b/src/editor/main.js
index 95d3a84..6d3e7e7 100644
--- a/src/editor/main.js
+++ b/src/editor/main.js
@@ -22,8 +22,13 @@ define(
          * @return {Render} render对象
          */
         exports.create = function(main, options) {
+            
+            if(!main) {
+                throw 'need main element';
+            }
+
             options = options || {};
-            var editor = new Editor(options);
+            var editor = new Editor(main, options);
             var opt = options.renderOptions || {};
             opt.controller = editor;
             render.create(main, opt);
diff --git a/src/editor/menu/ContextMenu.js b/src/editor/menu/ContextMenu.js
new file mode 100644
index 0000000..2955593
--- /dev/null
+++ b/src/editor/menu/ContextMenu.js
@@ -0,0 +1,141 @@
+/**
+ * @file ContextMenu.js
+ * @author mengke01
+ * @date 
+ * @description
+ * 右键菜单设置
+ */
+
+
+define(
+    function(require) {
+
+        var lang = require('common/lang');
+
+        /**
+         * 创建一个浮动层
+         * 
+         * @return {HTMLElement} 浮动层对象
+         */
+        function createPopup(container, options) {
+            var div = document.createElement('div');
+            div.className = options.className || 'editor-contextmenu';
+            div.style.position = 'absolute';
+            div.style.zIndex = options.zIndex || 1000;
+            div.style.display = 'none';
+            container.appendChild(div);
+            return div;
+        }
+
+
+        /**
+         * 弹出菜单
+         * 
+         * @constructor
+         * @param {HTMLElement} container 主元素
+         * @param {Object} options 选项参数
+         */
+        function ContextMenu(container, options) {
+            this.container = container || document.body;
+            this.main = createPopup(this.container, options || {});
+            this.commands = {};
+
+            var me = this;
+            me.main.addEventListener('click', me._command_click = function(e) {
+                var key = e.target.getAttribute('data-key');
+                if (key) {
+                    var event = {
+                        command: key,
+                        commandArgs: me.commands[key]
+                    };
+                    me.onClick && me.onClick(event);
+                }
+            } , false);
+
+            me._hide_click = function(e) {
+                me.hide();
+            };
+        }
+
+        lang.extend(ContextMenu.prototype, {
+
+            /**
+             * 设置命令集合
+             * 
+             * @param {Object} commands 命令集合
+             * 
+             * @return {this}
+             */
+            setCommands: function(commands) {
+                var str = '';
+                Object.keys(commands).forEach(function(key) {
+                    str += '<div data-key="'+ key +'">'+ commands[key].title +'</div>';
+                });
+                this.commands = commands;
+                this.main.innerHTML = str;
+            },
+
+            /**
+             * 展示右键菜单
+             * 
+             * @return {this}
+             */
+            show: function(p, commands) {
+                if(commands) {
+                    this.setCommands(commands);
+                }
+
+                this.main.style.display = 'block';
+                var maxWidth = this.container.clientWidth;
+                var maxHeight = this.container.clientHeight;
+                var width = this.main.offsetWidth;
+                var height = this.main.offsetHeight;
+
+                var x = p.x + width > maxWidth ? maxWidth - width : p.x;
+                var y = p.y + height > maxHeight ? maxHeight - height : p.y;
+
+                this.main.style.left = x + 'px';
+                this.main.style.top = y + 'px';
+
+                this.container.addEventListener('click', this._hide_click);
+            },
+
+            /**
+             * 隐藏右键菜单
+             * 
+             * @return {this}
+             */
+            hide: function() {
+                this.main.style.display = 'none';
+                this.onClick = null;
+                this.container.removeEventListener('click', this._hide_click);
+            },
+
+            /**
+             * 是否打开
+             * 
+             * @return {boolean} 是否
+             */
+            visible: function() {
+                return this.main.style.display !== 'none';
+            },
+
+            onClick: null,
+
+            /**
+             * 注销
+             */
+            dispose: function() {
+                this.hide();
+                this.main.removeEventListener('click', this._command_click, false);
+                this.container.removeEventListener('click', this._hide_click, false);
+                this.main.remove();
+                this.main = this.container = null;
+                this._command_click = this._hide_click = null;
+                this.onClick = null;
+            }
+        });
+
+        return ContextMenu;
+    }
+);
diff --git a/src/editor/menu/command.js b/src/editor/menu/command.js
new file mode 100644
index 0000000..daa276b
--- /dev/null
+++ b/src/editor/menu/command.js
@@ -0,0 +1,81 @@
+/**
+ * @file command.js
+ * @author mengke01
+ * @date 
+ * @description
+ * 右键命令集合
+ */
+
+
+define(
+    function(require) {
+
+        // 点编辑命令
+        var point_command = {
+            add: {
+                title: '添加点'
+            },
+
+            remove: {
+                title: '删除点'
+            },
+
+            onCurve: {
+                title: '在曲线上'
+            },
+
+            offCurve: {
+                title: '远离曲线'
+            },
+
+            asStart: {
+                title: '作为开始点'
+            }
+        };
+
+        // 路径编辑命令
+        var path_command = {
+
+            add: {
+                title: '添加轮廓'
+            },
+
+            remove: {
+                title: '删除轮廓'
+            },
+
+            reverse: {
+                title: '改变方向'
+            },
+
+            cut: {
+                title: '剪切'
+            },
+
+            copy: {
+                title: '复制'
+            },
+
+            top: {
+                title: '置前'
+            },
+
+            bottom: {
+                title: '置后'
+            },
+
+            up: {
+                title: '上移一层'
+            },
+
+            down: {
+                title: '下移一层'
+            }
+        };
+
+        return {
+            point: point_command,
+            path: path_command
+        };
+    }
+);
diff --git a/src/editor/mode/bound.js b/src/editor/mode/bound.js
index ef706b4..84f5c23 100644
--- a/src/editor/mode/bound.js
+++ b/src/editor/mode/bound.js
@@ -51,12 +51,7 @@ define(
                     }
                     // 框选模式
                     else {
-                        this.selectionBox = {
-                            type: 'dashedrect',
-                            x: camera.x,
-                            y: camera.y
-                        };
-                        render.getLayer('cover').addShape(this.selectionBox);
+                        this.setMode('range');
                     }
                 }
 
@@ -85,12 +80,6 @@ define(
                         this.currentGroup.move(camera.mx, camera.my);
                     }
                 }
-                // 框选模式
-                else {
-                    this.selectionBox.width = camera.x - this.selectionBox.x;
-                    this.selectionBox.height = camera.y - this.selectionBox.y;
-                    render.getLayer('cover').refresh();
-                }
             },
 
             /**
@@ -103,12 +92,6 @@ define(
                         this.currentPoint = null;
                     }
                 }
-                else if(this.selectionBox) {
-                    this.selectionBox = null;
-                    var coverLayer = this.render.getLayer('cover');
-                    coverLayer.clearShapes();
-                    coverLayer.refresh();
-                }
             },
 
             /**
diff --git a/src/editor/mode/editorMode.js b/src/editor/mode/editorMode.js
index 834f94d..04f28ce 100644
--- a/src/editor/mode/editorMode.js
+++ b/src/editor/mode/editorMode.js
@@ -11,7 +11,9 @@ define(
     function(require) {
         return {
             'bound': require('./bound'),
-            'point': require('./point')
+            'point': require('./point'),
+            'range': require('./range'),
+            'default': require('./bound')
         };
     }
 );
diff --git a/src/editor/mode/point.js b/src/editor/mode/point.js
index 24dfd26..26d5135 100644
--- a/src/editor/mode/point.js
+++ b/src/editor/mode/point.js
@@ -14,6 +14,98 @@ define(
         var pathAdjust = require('render/util/pathAdjust');
         var lang = require('common/lang');
 
+
+        /**
+         * 处理右键菜单
+         * 
+         * @param {string} command 命令
+         */
+        function onContextMenu(e) {
+
+            if(!this.currentPoint) {
+                return;
+            }
+
+            var coverLayer = this.render.getLayer('cover');
+            var fontLayer = this.render.getLayer('font');
+            var command = e.command;
+            var shape = fontLayer.getShape(this.currentPoint.shapeId);
+            var points = shape.points;
+            var pointId = +this.currentPoint.pointId;
+
+            if (command == 'add') {
+                var cur = points[pointId];
+                var next = points[pointId == points.length - 1 ? 0 : pointId + 1];
+                var p = {
+                    x: (cur.x + next.x) / 2,
+                    y: (cur.y + next.y) / 2,
+                    onCurve: true
+                }
+
+                points.splice(pointId + 1, 0, p);
+            }
+            else if (command == 'remove') {
+                points.splice(pointId, 1);
+            }
+            else if (command == 'onCurve') {
+                points[pointId].onCurve = true;
+            }
+            else if (command == 'offCurve') {
+                delete points[pointId].onCurve;
+            }
+            else if (command == 'asStart') {
+                shape.points = points.slice(pointId).concat(points.slice(0, pointId));
+            }
+
+            refreshControlPoints.call(this);
+
+            this.currentPoint = null;
+            fontLayer.refresh();
+            this.contextMenu.hide();
+        }
+
+        // 刷新控制点
+        function refreshControlPoints() {
+            var controls = [];
+            var shapes = this.render.getLayer('font').shapes;
+            shapes.forEach(function(shape) {
+                var last = shape.points.length - 1;
+                shape.points.forEach(function(p, index) {
+                    var cpoint = {
+                        type: p.onCurve ? 'point' : 'cpoint',
+                        x: p.x,
+                        y: p.y,
+                        point: p,
+                        pointId: index,
+                        shapeId: shape.id
+                    };
+
+                    if (index == 0) {
+                        cpoint.style = {
+                            fillColor: 'green',
+                            strokeWidth: 2
+                        };
+                    }
+                    else if (index == last) {
+                        cpoint.style = {
+                            fillColor: 'red',
+                            strokeWidth: 2
+                        };
+                    }
+
+                    controls.push(cpoint);
+                });
+            });
+
+            var coverLayer = this.render.getLayer('cover');
+            coverLayer.clearShapes();
+            controls.forEach(function(shape){
+                coverLayer.addShape(shape);
+            });
+            coverLayer.refresh();
+        }
+
+
         var pointMode = {
             name: 'point',
 
@@ -22,10 +114,16 @@ define(
              */
             down: function(e) {
 
+                if (this.currentPoint) {
+                    this.currentPoint.style = this.currentPointReserved.style;
+                    this.currentPoint = this.currentPointReserved = null;
+                }
+
                 var render = this.render;
                 var result = render.getLayer('cover').getShapeIn(e);
 
                 if(result) {
+
                     this.currentPoint = result[0];
                     this.currentPointReserved = lang.clone(this.currentPoint);
                     this.currentPoint.style = lang.extend(
@@ -34,6 +132,8 @@ define(
                             fillColor: 'blue'
                         }
                     );
+
+                    render.getLayer('cover').refresh();
                 }
             },
 
@@ -41,6 +141,7 @@ define(
              * 拖动事件
              */
             drag: function(e) {
+
                 var render = this.render;
                 var camera = render.camera;
                 if(this.currentPoint) {
@@ -49,20 +150,20 @@ define(
 
                     if(camera.event.altKey) {
                         current.x = reserved.x;
-                        current._point.x = reserved._point.x;
+                        current.point.x = reserved.point.x;
                     }
                     else {
                         current.x = reserved.x + camera.event.deltaX;
-                        current._point.x = reserved._point.x + camera.event.deltaX;
+                        current.point.x = reserved.point.x + camera.event.deltaX;
                     }
 
                     if(camera.event.shiftKey) {
                         current.y = reserved.y;
-                        current._point.y = reserved._point.y;
+                        current.point.y = reserved.point.y;
                     }
                     else {
                         current.y = reserved.y + camera.event.deltaY;
-                        current._point.y = reserved._point.y + camera.event.deltaY;
+                        current.point.y = reserved.point.y + camera.event.deltaY;
                     }
 
                     render.getLayer('cover').refresh();
@@ -85,46 +186,12 @@ define(
 
             begin: function() {
 
-                var controls = [];
-                var shapes = this.render.getLayer('font').shapes;
-
-                shapes.forEach(function(shape) {
-                    var last = shape.points.length - 1;
-                    shape.points.forEach(function(p, index) {
-                        var cpoint = {
-                            type: p.onCurve ? 'point' : 'cpoint',
-                            x: p.x,
-                            y: p.y,
-                            _point: p,
-                            _shape: shape.id
-                        };
-
-                        if (index == 0) {
-                            cpoint.style = {
-                                fillColor: 'green',
-                                strokeWidth: 2
-                            };
-                        }
-                        else if (index == last) {
-                            cpoint.style = {
-                                fillColor: 'red',
-                                strokeWidth: 2
-                            };
-                        }
-
-                        controls.push(cpoint);
-                    });
-                });
-
+                var me = this;
                 var coverLayer = this.render.getLayer('cover');
                 coverLayer.options.fill = true;
 
-                controls.forEach(function(shape){
-                    coverLayer.addShape(shape);
-                });
-                coverLayer.refresh();
+                refreshControlPoints.call(me);
 
-                var me = this;
                 // 注册鼠标样式
                 me.render.capture.on('move', me.__moveEvent = function (e) {
                     var shape = coverLayer.getShapeIn(e);
@@ -136,6 +203,14 @@ define(
                     }
                 });
 
+                // 右键菜单
+                me.render.capture.on('rightdown', me.__contextEvent = function (e) {
+                    if (me.currentPoint) {
+                        me.contextMenu.onClick = lang.bind(onContextMenu, me);
+                        me.contextMenu.show(e, require('../menu/command').point);
+                    }
+                });
+
                 this.modifiedShape = {};
             },
 
@@ -147,6 +222,8 @@ define(
                 coverLayer.refresh();
 
                 this.render.capture.un('move', this.__moveEvent);
+                this.render.capture.un('move', this.__contextEvent);
+
                 this.render.setCursor('default');
             }
         };
diff --git a/src/editor/mode/range.js b/src/editor/mode/range.js
new file mode 100644
index 0000000..775be1e
--- /dev/null
+++ b/src/editor/mode/range.js
@@ -0,0 +1,85 @@
+/**
+ * @file range.js
+ * @author mengke01
+ * @date 
+ * @description
+ * 多选区模式
+ */
+
+
+define(
+    function(require) {
+
+        var ShapeGroup = require('../group/ShapeGroup');
+        var lang = require('common/lang');
+        var selectShape = require('render/util/selectShape');
+
+        var POS_CUSOR = require('./cursor');
+
+        var mode = {
+
+            name: 'range',
+
+            /**
+             * 按下事件
+             */
+            down: function(e) {
+
+            },
+
+            /**
+             * 开始拖动
+             */
+            dragstart: function(e) {
+                mode.begin.call(this, e);
+            },
+
+            /**
+             * 拖动事件
+             */
+            drag: function(e) {
+                if (this.selectionBox) {
+                    var camera = this.render.camera;
+                    this.selectionBox.width = camera.x - this.selectionBox.x;
+                    this.selectionBox.height = camera.y - this.selectionBox.y;
+                    this.render.getLayer('cover').refresh();
+                }
+            },
+
+            /**
+             * 拖动结束事件
+             */
+            dragend: function(e) {
+                if(this.selectionBox) {
+                    this.selectionBox = null;
+                    var coverLayer = this.render.getLayer('cover');
+                    coverLayer.clearShapes();
+                    coverLayer.refresh();
+                }
+                this.setMode();
+            },
+
+            /**
+             * 开始模式
+             */
+            begin: function() {
+                var camera = this.render.camera;
+                this.selectionBox = {
+                    type: 'dashedrect',
+                    x: camera.x,
+                    y: camera.y
+                };
+                this.render.getLayer('cover').addShape(this.selectionBox);
+            },
+
+            /**
+             * 结束模式
+             */
+            end: function() {
+                this.selectionBox = null;
+            }
+        };
+
+        return mode;
+    }
+);
diff --git a/src/render/capture/Mouse.js b/src/render/capture/Mouse.js
index 23a7e10..428b330 100644
--- a/src/render/capture/Mouse.js
+++ b/src/render/capture/Mouse.js
@@ -130,11 +130,10 @@ define(
             this.isDown = true;
 
             // 左键
-            if (1 == e.which) {
-                this.fire('down', event);
-            }
-            // 这里把中键和右键处理成同一个
-            else {
+            
+            this.fire('down', event);
+
+            if (3 == e.which) {
                 this.fire('rightdown', event);
             }
         }
@@ -223,9 +222,14 @@ define(
 
             var event = getEvent(e);
 
-            
+            // 左键
+
             this.fire('up', event);
 
+            if (3 == e.which) {
+                this.fire('rightup', event);
+            }
+
             if (this.isDown && this.isDragging && false !== this.events.drag) {
                 event.deltaX = event.x - this.startX;
                 event.deltaY = event.y - this.startY;
@@ -270,6 +274,7 @@ define(
          * @param {Object} e 事件参数
          */
         function mouseover(e) {
+            prevent(e);
             if(false === this.events.mouseover) {
                 return;
             }
@@ -282,14 +287,13 @@ define(
          * @param {Object} e 事件参数
          */
         function mouseout(e) {
+            prevent(e);
             if(false === this.events.mouseout) {
                 return;
             }
             this.fire('out');
         }
 
-
-
         /**
          * 鼠标动作捕获器
          * 
diff --git a/src/ttf/util/contourAdjust.js b/src/ttf/util/contourAdjust.js
index b391a29..b3e2113 100644
--- a/src/ttf/util/contourAdjust.js
+++ b/src/ttf/util/contourAdjust.js
@@ -30,7 +30,7 @@ define(
                 p.x = scaleX * (p.x + x);
                 p.y = scaleY * (p.y + y);
             });
-
+            
             return contour;
         }
 
