add drag reference line

src/editor/mode/bound.js

@@ -12,7 +12,7 @@ define(
 
         var lang = require('common/lang');
         var selectShape = require('render/util/selectShape');
-
+        var referenceline = require('./referenceline');
         var POS_CUSOR = require('./cursor');
 
         var mode = {
@@ -22,6 +22,14 @@ define(
              */
             down: function(e) {
                 if (1 === e.which) {
+
+                    // 是否在边界拉出参考线
+                    if (e.x <= 20 || e.y <= 20) {
+                        this.setMode('referenceline', referenceline.newLine, e.x, e.y);
+                        return;
+                    }
+
+
                     var camera = this.render.camera;
 
                     // 字体模式
@@ -40,7 +48,7 @@ define(
                     var result = this.axisLayer.getShapeIn(e);
                     if(result) {
                         var line = result[0];
-                        this.setMode('referenceline', line);
+                        this.setMode('referenceline', referenceline.dragLine, line, e);
                         return;
                     }
 

src/editor/mode/referenceline.js

@@ -14,13 +14,9 @@ define(
 
         var mode = {
 
-            /**
-             * 按下事件
-             */
-            down: function(e) {
-                if(1 == e.which) {
-                }
-            },
+            newLine: 1, // 拖出新参考线模式
+
+            dragLine: 2, // 拖动参考线模式
 
             /**
              * 拖动事件
@@ -38,6 +34,27 @@ define(
                         }
                         this.axisLayer.refresh();
                     }
+                    else if (this._dragMode === mode.newLine) {
+
+                        if (e.startX <= 20 && e.x > 20) {
+                            this.currentLine = this.axisLayer.addShape('line', {
+                                p0: {
+                                    x: e.x
+                                }
+                            });
+                            this.render.setCursor('e-resize');
+                        }
+                        else if (e.startY <= 20 && e.y > 20) {
+                            this.currentLine = this.axisLayer.addShape('line', {
+                                p0: {
+                                    y: e.y
+                                }
+                            });
+                            this.render.setCursor('n-resize');
+                        }
+
+                        this._dragMode == mode.dragLine
+                    }
                 }
             },
 
@@ -71,23 +88,31 @@ define(
             /**
              * 开始模式
              */
-            begin: function(line) {
-                if(undefined !== line.p0.x) {
-                    this.render.setCursor('e-resize');
-                }
-                else {
-                    this.render.setCursor('n-resize');
+            begin: function(m) {
+
+                if (m === mode.dragLine) {
+                    var line = arguments[1];
+                    if(undefined !== line.p0.x) {
+                        this.render.setCursor('e-resize');
+                    }
+                    else {
+                        this.render.setCursor('n-resize');
+                    }
+
+                    this.currentLine = line;
+                    this.p0 = lang.clone(line.p0);
                 }
 
-                this.currentLine = line;
-                this.p0 = lang.clone(line.p0);
+                this._dragMode = m;
             },
 
             /**
              * 结束模式
              */
             end: function() {
-                this.currentLine = this.p0 = null;
+                delete this._dragMode;
+                delete this.currentLine;
+                delete this.p0;
                 this.render.setCursor('default');
             }
         };

src/render/shape/Line.js

@@ -88,8 +88,8 @@ define(
 
                 // 单点模式
                 if(undefined === shape.p1) {
-                    return  undefined !== shape.p0.x && Math.abs(shape.p0.x - x) < 3
-                        || undefined !== shape.p0.y && Math.abs(shape.p0.y - y) < 3;
+                    return  undefined !== shape.p0.x && Math.abs(shape.p0.x - x) < 4
+                        || undefined !== shape.p0.y && Math.abs(shape.p0.y - y) < 4;
                 }
                 else {
                     var x0 = shape.p0.x;

src/render/util/drawGraduation.js

@@ -96,6 +96,8 @@ define(
 
             // 绘制轴线文字，这里由于canvas不支持小字体，因此进行缩放后绘制
             ctx.save();
+
+            ctx.fillStyle = config.graduation.color || '#000';
             ctx.scale(0.8, 0.8);
             var textOffset = thickness - 8; // 文本偏移
             for(var axis = x, i = 0; axis < width; i++, axis += markSize) {
@@ -110,7 +112,6 @@ define(
                 }
             }
 
-
             // 纵轴线
             var textOffset = 0; // 文本偏移
             for(var axis = y, i = 0; axis > thickness; i++, axis -= markSize) {