modify group scale

src/editor/group/ShapesGroup.js

@@ -12,8 +12,11 @@ define(
         var pathAdjust = require('graphics/pathAdjust');
         var lang = require('common/lang');
         var computeBoundingBox = require('graphics/computeBoundingBox');
+
+        var moveTransform = require('./moveTransform');
         var scaleTransform = require('./scaleTransform');
         var rotateTransform = require('./rotateTransform');
+
         var updateControls = require('./updateControls');
         
 
@@ -36,29 +39,46 @@ define(
         /**
          * 选择组控制器
          */
-        function ShapesGroup(shapes, editor, mode) {
+        function ShapesGroup(shapes, editor) {
             this.editor = editor;
             this.setShapes(shapes);
-            this.setMode(mode);
         }
 
         /**
          * 根据控制点做图形变换
          */
-        ShapesGroup.prototype.beginTransform = function(point) {
+        ShapesGroup.prototype.beginTransform = function(point, camera) {
             this.bound = getBound(this.shapes);
-            this.originShapes = lang.clone(this.shapes);
+            this.coverShapes = lang.clone(this.shapes);
-            this.editor.coverLayer.clearShapes();
+
+            var coverLayer = this.editor.coverLayer;
+
+            coverLayer.clearShapes();
+            this.coverShapes.forEach(function(shape) {
+                shape.id = 'cover-' + shape.id;
+                shape.selectable = false;
+
+                coverLayer.addShape(shape);
+            });
+
+            coverLayer.addShape({
+                type: 'polygon',
+                dashed: true,
+                id: 'bound'
+            });
         };
 
         /**
          * 根据控制点做图形变换
          */
         ShapesGroup.prototype.transform = function(point, camera) {
-            if (this.mode === 'scale') {
+            if (this.mode === 'move') {
+                moveTransform.call(this, camera);
+            }
+            else if (this.mode === 'scale') {
                 scaleTransform.call(this, point, camera);
             }
-            else {
+            else if (this.mode === 'rotate') {
                 rotateTransform.call(this, point, camera);
             }
         };
@@ -66,24 +86,21 @@ define(
         /**
          * 刷新Shapesgroup信息
          */
-        ShapesGroup.prototype.finishTransform = function() {
+        ShapesGroup.prototype.finishTransform = function(point, camera) {
-            delete this.originShapes;
-            delete this.bound;
-            this.refresh();
-        };
 
-        /**
+            var coverLayer = this.editor.coverLayer;
-         * 移动到指定位置
+            this.coverShapes.forEach(function(shape) {
-         */
+                coverLayer.removeShape(shape);
-        ShapesGroup.prototype.move = function(mx, my) {
-
-            this.shapes.forEach(function(shape) {
-                pathAdjust(shape.points, 1, 1, mx, my);
             });
-            
+
+            this.coverShapes = this.shapes;
+            this.transform(point, camera);
+
+            delete this.coverShapes;
+            delete this.bound;
+
             this.editor.fontLayer.refresh();
-            this.editor.coverLayer.move(mx, my);
+            this.refresh();
-            this.editor.coverLayer.refresh();
         };
 
         /**
@@ -111,10 +128,24 @@ define(
          * 设置操作的shapes
          */
         ShapesGroup.prototype.setMode = function(mode) {
-            this.mode = mode || 'scale'; // 两种变化模式，scale和rotate
+            this.mode = mode; // 两种变化模式，scale和rotate
         };
 
 
+        /**
+         * 移动到指定位置
+         */
+        ShapesGroup.prototype.move = function(mx, my) {
+
+            this.shapes.forEach(function(shape) {
+                pathAdjust(shape.points, 1, 1, mx, my);
+            });
+            
+            this.editor.fontLayer.refresh();
+            this.editor.coverLayer.move(mx, my);
+            this.editor.coverLayer.refresh();
+        };
+
         /**
          * refresh
          */

src/editor/group/moveTransform.js

@@ -0,0 +1,57 @@
+/**
+ * @file moveTransform.js
+ * @author mengke01
+ * @date 
+ * @description
+ * 移动对象
+ */
+
+
+define(
+    function(require) {
+
+        var lang = require('common/lang');
+        var pathAdjust = require('graphics/pathAdjust');
+
+        /**
+         * 移动对象
+         * 
+         * @param {Object} camera 镜头对象
+         */
+        function moveTransform (camera) {
+
+            var x = camera.x - camera.startX;
+            var y = camera.y - camera.startY;
+
+            // 更新shape
+            var shapes = this.shapes;
+
+            this.coverShapes.forEach(function(coverShape, index) {
+                var shape = lang.clone(shapes[index]);
+                pathAdjust(shape.points, 1, 1, x, y);
+                lang.extend(coverShape, shape);
+
+            });
+            
+
+            // 更新边界
+            var coverLayer = this.editor.coverLayer;
+            var boundShape = coverLayer.getShape('bound');
+            var bound = this.bound;
+            boundShape.points = pathAdjust(
+                [
+                    {x: bound.x, y:bound.y},
+                    {x: bound.x + bound.width, y:bound.y},
+                    {x: bound.x + bound.width, y:bound.y + bound.height},
+                    {x: bound.x, y:bound.y + bound.height}
+                ], 
+                1, 1, x, y
+            );
+            
+            coverLayer.refresh();
+
+        }
+
+        return moveTransform;
+    }
+);

src/editor/group/rotateTransform.js

@@ -30,29 +30,17 @@ define(
             // 更新shape
             var shapes = this.shapes;
 
-            this.originShapes.forEach(function(originShape, index) {
+            this.coverShapes.forEach(function(coverShape, index) {
-                var shape = lang.clone(originShape);
+                var shape = lang.clone(shapes[index]);
                 transformer(shape.points, matrix[2], matrix[0], matrix[1]);
-                lang.extend(shapes[index], shape);
+                lang.extend(coverShape, shape);
 
             });
             
-            this.editor.fontLayer.refresh();
 
             // 更新边界
             var coverLayer = this.editor.coverLayer;
             var boundShape = coverLayer.getShape('bound');
-
-            if(!boundShape) {
-                boundShape = {
-                    type: 'polygon',
-                    dashed: true,
-                    id: 'bound'
-                };
-                coverLayer.addShape(boundShape);
-            }
-
-
             var bound = this.bound;
             boundShape.points = transformer(
                 [

src/editor/group/scaleTransform.js

@@ -35,9 +35,9 @@ define(
             // 更新shape
             var shapes = this.shapes;
 
-            this.originShapes.forEach(function(originShape, index) {
+            this.coverShapes.forEach(function(coverShape, index) {
 
-                var shape = lang.clone(originShape);
+                var shape = lang.clone(shapes[index]);
                 pathAdjust(shape.points, matrix[2], matrix[3], -matrix[0], -matrix[1]);
                 pathAdjust(shape.points, 1, 1, matrix[0], matrix[1]);
 
@@ -48,26 +48,12 @@ define(
                 if (matrix[3] < 0 && matrix[2] >= 0) {
                     shape.points = shape.points.reverse();
                 }
-
+                lang.extend(coverShape, shape);
-                lang.extend(shapes[index], shape);
-
             });
             
-            this.editor.fontLayer.refresh();
-
             // 更新边界
             var coverLayer = this.editor.coverLayer;
             var boundShape = coverLayer.getShape('bound');
-
-            if(!boundShape) {
-                boundShape = {
-                    type: 'polygon',
-                    dashed: true,
-                    id: 'bound'
-                };
-                coverLayer.addShape(boundShape);
-            }
-
             var bound = this.bound;
             var points = pathAdjust(
                 [

src/editor/mode/referenceline.js

@@ -42,7 +42,7 @@ define(
                                     x: e.x
                                 }
                             });
-                            this.render.setCursor('e-resize');
+                            this.render.setCursor('col-resize');
                         }
                         else if (e.startY <= 20 && e.y > 20) {
                             this.currentLine = this.axisLayer.addShape('line', {
@@ -50,7 +50,7 @@ define(
                                     y: e.y
                                 }
                             });
-                            this.render.setCursor('n-resize');
+                            this.render.setCursor('row-resize');
                         }
 
                         this._dragMode == mode.dragLine;
@@ -93,10 +93,10 @@ define(
                 if (m === mode.dragLine) {
                     var line = arguments[1];
                     if(undefined !== line.p0.x) {
-                        this.render.setCursor('e-resize');
+                        this.render.setCursor('col-resize');
                     }
                     else {
-                        this.render.setCursor('n-resize');
+                        this.render.setCursor('row-resize');
                     }
 
                     this.currentLine = line;

src/editor/mode/shapes.js

@@ -118,29 +118,29 @@ define(
                 var result = render.getLayer('cover').getShapeIn(e);
 
                 if(result) {
-                    if (this.currentGroup) {
+                    this.currentPoint = lang.clone(result[0]);
-                        this.currentPoint = lang.clone(result[0]);
-                    }
                 }
                 else {
 
-                    if (this.currentGroup) {
+                    this.currentPoint = null;
-                        result = render.getLayer('font').getShapeIn(e);
+
-                        if(result) {
+                    result = render.getLayer('font').getShapeIn(e);
-                            var shape = result[0];
+
-                            if (result.length > 1) {
+                    if(result) {
-                                shape = selectShape(result);
+                        var shape = result[0];
-                            }
+                        if (result.length > 1) {
-                            
+                            shape = selectShape(result);
-                            if(this.currentGroup.shapes.indexOf(shape) >=0) {
+                        }
-                                return;
+                        
-                            }
+                        if(this.currentGroup.shapes.indexOf(shape) >=0) {
-                            else {
+                            return;
-                                this.currentGroup.setShapes([shape]);
+                        }
-                                this.currentGroup.setMode('scale');
+                        else {
-                                this.currentGroup.refresh();
+                            this.currentGroup.setShapes([shape]);
-                                return;
+                            this.currentGroup.setMode('scale');
-                            }
+                            this.currentGroup.refresh();
+                            this.clicked = false;
+                            return;
                         }
                     }
 
@@ -154,41 +154,34 @@ define(
              */
             dragstart: function(e) {
 
-
+                // 点拖动模式
-                if (this.currentGroup) {
+                if (this.currentPoint) {
-
+                    this.currentGroup.beginTransform(this.currentPoint, this.render.camera);
-                    // 点拖动模式
-                    if (this.currentPoint) {
-                        this.currentGroup.beginTransform(this.currentPoint);
-                    }
-                    // 复制模式
-                    else if (e.ctrlKey && e.altKey) {
-                        var shapes = lang.clone(this.currentGroup.shapes);
-                        var fontLayer = this.fontLayer;
-                        shapes.forEach(function(shape) {
-                            shape.id = guid('shape');
-                            fontLayer.addShape(shape);
-                        });
-                        
-                        this.currentGroup.setShapes(shapes);
-                    }
-
                 }
+                // 复制模式
+                else if (e.ctrlKey && e.altKey) {
+                    var shapes = lang.clone(this.currentGroup.shapes);
+                    var fontLayer = this.fontLayer;
+                    shapes.forEach(function(shape) {
+                        shape.id = guid('shape');
+                        fontLayer.addShape(shape);
+                    });
+                    
+                    this.currentGroup.setShapes(shapes);
+                }
+                else {
+                    this.currentGroup.setMode('move');
+                    this.currentGroup.beginTransform(this.currentPoint, this.render.camera);
+                }
+
             },
 
             /**
              * 拖动事件
              */
             drag: function(e) {
-                var render = this.render;
-                var camera = render.camera;
                 if(this.currentGroup) {
-                    if (this.currentPoint) {
+                    this.currentGroup.transform(this.currentPoint, this.render.camera);
-                        this.currentGroup.transform(this.currentPoint, camera);
-                    }
-                    else {
-                        this.currentGroup.move(camera.mx, camera.my);
-                    }
                 }
             },
 
@@ -196,35 +189,29 @@ define(
              * 拖动结束事件
              */
             dragend: function(e) {
-                if (this.currentGroup) {
-                    if (this.currentPoint) {
-                        this.currentGroup.finishTransform(this.currentPoint);
-                        this.currentPoint = null;
-                    }
-                    this.fire('change');
-                }
-            },
 
-            /**
+                if (this.currentPoint) {
-             * 点击
+                    this.currentGroup.finishTransform(this.currentPoint, this.render.camera);
-             */
-            click: function(e) {
-                // 变换编辑模式
-                if (e.time > 400 && this.currentGroup && !this.currentPoint) {
-                    this.currentGroup.setMode(this.currentGroup.mode == 'scale' ? 'rotate' : 'scale');
-                    this.currentGroup.refresh();
-                }
-                else {
                     this.currentPoint = null;
                 }
+                else if (this.currentGroup.mode == 'move') {
+                    this.currentGroup.finishTransform(this.currentPoint, this.render.camera);
+                    this.currentGroup.setMode('scale');
+                }
+
+                this.render.setCursor('default');
+                this.fire('change');
             },
 
             /**
              * 移动
              */
             move: function(e) {
+
                 var shapes = this.coverLayer.getShapeIn(e);
-                if(shapes) {
+                var mode = this.currentGroup.mode;
+                
+                if(shapes && mode != 'move' ) {
                     this.render.setCursor(POS_CUSOR[this.currentGroup.mode][shapes[0].pos] || 'default');
                 }
                 else {
@@ -237,14 +224,22 @@ define(
              */
             rightdown: function(e) {
                 // 对单个shape进行操作
-                if (this.currentGroup) {
+                this.contextMenu.onClick = lang.bind(onContextMenu, this);
-                    this.contextMenu.onClick = lang.bind(onContextMenu, this);
+                this.contextMenu.show(e, 
-                    this.contextMenu.show(e, 
+                    this.currentGroup.shapes.length > 1
-                        this.currentGroup.shapes.length > 1
+                    ? commandList.shapes
-                        ? commandList.shapes
+                    : commandList.shape
-                        : commandList.shape
+                );
-                    );
+            },
+
+            click: function(e) {
+                if (this.clicked) {
+                    // 变换编辑模式
+                    var mode = this.currentGroup.mode;
+                    this.currentGroup.setMode(mode == 'scale' ? 'rotate' : 'scale');
+                    this.currentGroup.refresh();
                 }
+                this.clicked = true;
             },
 
             /**
@@ -252,27 +247,28 @@ define(
              */
             keyup: function(e) {
                 // esc键，重置model
-                if (e.key == 'delete' && this.currentGroup) {
+                if (e.key == 'delete') {
                     this.execCommand('removeshapes', this.currentGroup.shapes);
                     this.setMode();
                     this.fire('change');
                 }
-                else if(e.keyCode == 65 && e.ctrlKey && this.currentGroup) {
+                // 全选
+                else if(e.keyCode == 65 && e.ctrlKey) {
                     this.currentGroup.setShapes(this.fontLayer.shapes.slice());
                     this.currentGroup.refresh();
                 }
                 // 剪切
-                else if (e.keyCode == 88 && e.ctrlKey && this.currentGroup) {
+                else if (e.keyCode == 88 && e.ctrlKey) {
                     this.execCommand('cutshapes', this.currentGroup.shapes);
                     this.setMode();
                     this.fire('change');
                 }
                 // 复制
-                else if (e.keyCode == 67 && e.ctrlKey && this.currentGroup) {
+                else if (e.keyCode == 67 && e.ctrlKey) {
                     this.execCommand('copyshapes', this.currentGroup.shapes);
                 }
                 // 移动
-                else if(stepMap[e.key] && this.currentGroup) {
+                else if(stepMap[e.key]) {
                     this.fire('change');
                 }
                 else if (e.key == 'esc') {
@@ -285,7 +281,7 @@ define(
              */
             keydown: function(e) {
                 // 移动
-                if(stepMap[e.key] && this.currentGroup) {
+                if(stepMap[e.key]) {
                     this.currentGroup.move(stepMap[e.key][0], stepMap[e.key][1]);
                 }
             },
@@ -296,6 +292,8 @@ define(
             begin: function(shapes) {
                 this.currentGroup = new ShapesGroup(shapes, this);
                 this.currentGroup.refresh();
+                this.currentGroup.setMode('scale');
+                this.clicked = false;
             },
 
 
@@ -304,14 +302,9 @@ define(
              */
             end: function() {
 
-                if (this.currentGroup) {
+                this.currentPoint = null;
-                    if (this.currentPoint) {
+                this.currentGroup.dispose();
-                        this.currentGroup.finishTransform(this.currentPoint);
+                this.currentGroup = null;
-                        this.currentPoint = null;
-                    }
-                    this.currentGroup.dispose();
-                    this.currentGroup = null;
-                }
 
                 this.render.setCursor('default');
             }