增加初始化设置

css/common/ico.less

@@ -3,15 +3,18 @@
 // fontface
 @font-face {
     font-family: 'fonteditor';
-    src: url('../font/iconfont.ttf') format('truetype');
+    src: url('../../font/iconfont.ttf') format('truetype');
 }
 
 .ico() {
     display: inline-block;
-    font-family: 'fonteditor';
+    &:before,
-    font-style:normal;
+    &:after {
-    -webkit-font-smoothing: antialiased;
+        font-family: 'fonteditor';
-    -webkit-text-stroke-width: 0.1px;
+        font-style:normal;
+        -webkit-font-smoothing: antialiased;
+        -webkit-text-stroke-width: 0.1px; 
+    }
 }
 
 .i-ico(@unicode) {

demo/css/editor.css

@@ -17,16 +17,21 @@ a:hover {
 }
 @font-face {
   font-family: 'fonteditor';
-  src: url('../font/iconfont.ttf') format('truetype');
+  src: url('../../font/iconfont.ttf') format('truetype');
 }
 .i-edit,
 .i-del {
   display: inline-block;
+  font-size: 12px;
+}
+.i-edit:before,
+.i-del:before,
+.i-edit:after,
+.i-del:after {
   font-family: 'fonteditor';
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -webkit-text-stroke-width: 0.1px;
-  font-size: 12px;
 }
 .i-edit:hover,
 .i-del:hover {
@@ -41,6 +46,9 @@ a:hover {
 }
 .i-github {
   display: inline-block;
+}
+.i-github:before,
+.i-github:after {
   font-family: 'fonteditor';
   font-style: normal;
   -webkit-font-smoothing: antialiased;
@@ -51,10 +59,6 @@ a:hover {
 }
 .close-editor {
   display: inline-block;
-  font-family: 'fonteditor';
-  font-style: normal;
-  -webkit-font-smoothing: antialiased;
-  -webkit-text-stroke-width: 0.1px;
   position: absolute;
   right: 0;
   top: 0;
@@ -65,6 +69,13 @@ a:hover {
   border-left: 1px solid #000;
   display: none;
 }
+.close-editor:before,
+.close-editor:after {
+  font-family: 'fonteditor';
+  font-style: normal;
+  -webkit-font-smoothing: antialiased;
+  -webkit-text-stroke-width: 0.1px;
+}
 .close-editor:before {
   content: '\e611';
 }
@@ -133,11 +144,14 @@ a:hover {
 }
 .editor-contextmenu li[data-tag="selected"] {
   display: inline-block;
+  display: block;
+}
+.editor-contextmenu li[data-tag="selected"]:before,
+.editor-contextmenu li[data-tag="selected"]:after {
   font-family: 'fonteditor';
   font-style: normal;
   -webkit-font-smoothing: antialiased;
   -webkit-text-stroke-width: 0.1px;
-  display: block;
 }
 .editor-contextmenu li[data-tag="selected"]:after {
   content: '\e610';

src/editor/Editor.js

@@ -23,6 +23,7 @@ define(
         var initBinder = require('./controller/initBinder');
         var initAxis = require('./controller/initAxis');
         var initFont = require('./controller/initFont');
+        var initSetting = require('./controller/initSetting');
 
         /**
          * Render控制器
@@ -42,6 +43,7 @@ define(
         Editor.prototype.setRender = function(render) {
 
             this.render = render;
+            initSetting.call(this);
             initFont.call(this);
             initRender.call(this);
             initLayer.call(this);

src/editor/command/support.js

@@ -232,18 +232,34 @@ define(
             },
 
             /**
-             * 是否打开智能吸附
+             * 是否打开网格吸附
              */
-            sorption: function(open) {
+            gridsorption: function(enabled) {
-                open = !!open;
+                menuUtil.setSelected(commandList.editor, 'setting.gridsorption', !!enabled);
-                menuUtil.setSelected(commandList.editor, 'sorption', open);
+                this.options.sorption.enableGrid = this.sorption.enableGrid = !!enabled;
-                this.options.sorption.enable = open;
+            },
+
+            /**
+             * 是否打开轮廓吸附
+             */
+            shapesorption: function(enabled) {
+                menuUtil.setSelected(commandList.editor, 'setting.shapesorption', !!enabled);
+                this.options.sorption.enableShape = this.sorption.enableShape = !!enabled;
+            },
+
+            /**
+             * 是否打开轮廓吸附
+             */
+            showgrid: function(enabled) {
+                menuUtil.setSelected(commandList.editor, 'setting.showgrid', !!enabled);
+                this.options.axis.showGrid = this.axis.showGrid = !!enabled;
+                this.axisLayer.refresh();
             },
 
             /**
              * 设置字体信息
              */
-            font: function() {
+            setfont: function() {
 
                 // 计算边界
                 var box = computeBoundingBox.computePathBox.apply(null, this.fontLayer.shapes.map(function(shape) {
@@ -267,6 +283,13 @@ define(
                         name: this.font.name                        
                     }
                 });
+            },
+
+            /**
+             * 更多设置
+             */
+            moresetting: function(enabled) {
+                this.fire('setting:more', this.options);
             }
         };
 

src/editor/controller/initRender.js

@@ -56,9 +56,14 @@ define(
                 var type = e.args.type;
                 this.execCommand('addsupportshapes', type);
             }
-            else if (e.command == 'sorption') {
+            else if (e.command == 'gridsorption') {
-                var selected = e.args.selected;
+                this.execCommand('gridsorption', !e.args.selected);
-                this.execCommand('sorption', !selected);
+            }
+            else if (e.command == 'shapesorption') {
+                this.execCommand('shapesorption', !e.args.selected);
+            }
+            else if (e.command == 'showgrid') {
+                this.execCommand('showgrid', !e.args.selected);
             }
             else {
                 this.execCommand(e.command, e);

src/editor/controller/initSetting.js

@@ -0,0 +1,37 @@
+/**
+ * @file initSetting.js
+ * @author mengke01
+ * @date 
+ * @description
+ * 初始化设置
+ */
+
+
+define(
+    function(require) {
+
+        var menuUtil = require('../menu/util');
+        var commandList = require('../menu/commandList');
+
+        /**
+         * 初始化设置选项
+         */
+        function initSetting() {
+            menuUtil.setSelected(
+                commandList.editor, 'setting.gridsorption',
+                !!this.options.sorption.enableGrid
+            );
+            menuUtil.setSelected(
+                commandList.editor, 'setting.shapesorption',
+                !!this.options.sorption.enableShape
+            );
+            menuUtil.setSelected(
+                commandList.editor, 'setting.showgrid',
+                !!this.options.axis.showGrid
+            );
+        }
+
+
+        return initSetting;
+    }
+);

src/editor/group/ShapesGroup.js

@@ -60,7 +60,7 @@ define(
             this.boundControl.hide();
 
             // 设置吸附选项
-            if (this.mode === 'move' && this.shapes.length && this.editor.options.sorption.enable) {
+            if (this.mode === 'move' && this.editor.sorption.isEnable()) {
                 var sorptionShapes = [];
                 var shapes = this.shapes;
 
@@ -84,7 +84,7 @@ define(
                     this, camera,
                     key.ctrlKey ? false :  key.altKey,
                     key.ctrlKey ? false : key.shiftKey,
-                    this.editor.options.sorption.enable
+                    this.editor.sorption.isEnable()
                 );
             }
             else if (this.mode === 'scale') {
@@ -110,7 +110,7 @@ define(
             this.editor.coverLayer.removeShape('bound');
             this.editor.coverLayer.removeShape('boundcenter');
             this.editor.fontLayer.refresh();
-            if (this.mode === 'move' && this.editor.options.sorption.enable) {
+            if (this.mode === 'move' && this.editor.sorption.isEnable()) {
                 this.editor.coverLayer.removeShape('sorptionX');
                 this.editor.coverLayer.removeShape('sorptionY');
                 this.editor.sorption.clear();

src/editor/group/moveTransform.js

@@ -46,9 +46,8 @@ define(
                         sorptionShapeX = coverLayer.addShape({
                             type: 'line',
                             id: 'sorptionX',
-                            dashed: true,
                             style: {
-                                strokeColor: 'red'
+                                strokeColor: '#4AFF4A'
                             },
                             p0: {},
                             p1: {}
@@ -82,9 +81,8 @@ define(
                         sorptionShapeY = coverLayer.addShape({
                             type: 'line',
                             id: 'sorptionY',
-                            dashed: true,
                             style: {
-                                strokeColor: 'red'
+                                strokeColor: '#4AFF4A'
                             },
                             p0: {},
                             p1: {}

src/editor/menu/editor.js

@@ -62,9 +62,26 @@ define(
                 title: '切割轮廓'
             },
             {
-                name: 'sorption',
+                name: 'setting',
-                title: '智能吸附',
+                title: '设置',
-                selected: true
+                items: [
+                    {
+                        name: 'gridsorption',
+                        title: '吸附到网格线'
+                    },
+                    {
+                        name: 'shapesorption',
+                        title: '吸附到轮廓'
+                    },
+                    {
+                        name: 'showgrid',
+                        title: '显示网格'
+                    },
+                    {
+                        name: 'moresetting',
+                        title: '更多..'
+                    }
+                ]
             },
             {
                 name: 'add_referenceline',
@@ -79,7 +96,7 @@ define(
                 title: '重置缩放'
             },
             {
-                name: 'font',
+                name: 'setfont',
                 title: '字形信息'
             }
         ];

src/editor/options.js

@@ -17,10 +17,10 @@ define(
 
                 // 吸附选项
                 sorption: {
-                    enable: true, // 是否启用
+                    enableGrid: false, // 吸附到网格
-                    grid: true, // 吸附到网格
+                    enableShape: true, // 吸附到对象
-                    shape: true, // 吸附到对象
+                    gridDelta: 4, // 网格delta
-                    delta: 5 // 吸附delta
+                    delta: 5 // 对象delta
                 },
 
                 // 辅助线
@@ -45,7 +45,7 @@ define(
 
                 // 轴线
                 axis: {
-                    
+                    showGrid: true, // 显示网格
                     gapColor: '#A6A6FF',
                     gridColor: 'red',
                     emColor: 'red',

src/editor/widget/Sorption.js

@@ -49,9 +49,10 @@ define(
          * @param {Object} options 参数选项
          */
         function Sorption(options) {
+            this.gridDelta = options.gridDelta || 4; // 吸附检查offset
             this.delta = options.delta || 5; // 吸附检查offset
-            this.enableGrid = true;
+            this.enableGrid = options.enableGrid || false;
-            this.enableShape = true;
+            this.enableShape = options.enableShape || true;
         }
 
         /**
@@ -135,7 +136,7 @@ define(
 
             if (this.enableGrid) {
                 var delta = (x - this.axis.x) % this.axis.gap;
-                if (Math.abs(delta) < this.delta) {
+                if (Math.abs(delta) < this.gridDelta) {
                     return {
                         axis: x - delta,
                         y: 0
@@ -162,7 +163,7 @@ define(
 
             if (this.enableGrid) {
                 var delta = (y - this.axis.y) % this.axis.gap;
-                if (Math.abs(delta) < this.delta) {
+                if (Math.abs(delta) < this.gridDelta) {
                     return {
                         axis: y - delta,
                         x: 0
@@ -173,6 +174,15 @@ define(
             return false;
         };
 
+        /**
+         * 结束吸附检测
+         * 
+         * @return {this}
+         */
+        Sorption.prototype.isEnable = function() {
+            return this.enableShape || this.enableGrid;
+        };
+
         /**
          * 结束吸附检测
          * 

src/render/shape/support.js

@@ -16,7 +16,7 @@ define(
             rect: require('./Rect'),
             polygon: require('./Polygon'),
             font: require('./Font'),
-            glyf: require('./Glyf'),
+            //glyf: require('./Glyf'),
             path: require('./Path'),
             axis: require('./Axis'),
             graduation: require('./Graduation'),

src/render/util/drawAxis.js

@@ -26,34 +26,37 @@ define(
                 var x = Math.round(config.x);
                 var y = Math.round(config.y);
 
-                ctx.beginPath();
+                // 显示网格线
-                ctx.strokeStyle = config.gapColor || '#A6A6FF';
+                if (false !== config.showGrid) {
+                    ctx.beginPath();
+                    ctx.strokeStyle = config.gapColor || '#A6A6FF';
 
-                // 横轴线
+                    // 横轴线
-                for(var i = y; i < yMax; i += gap) {
+                    for(var i = y; i < yMax; i += gap) {
-                    ctx.moveTo(0, i);
+                        ctx.moveTo(0, i);
-                    ctx.lineTo(xMax, i);
+                        ctx.lineTo(xMax, i);
+                    }
+
+                    for(var i = y; i > 0; i -= gap) {
+                        ctx.moveTo(0, i);
+                        ctx.lineTo(xMax, i);
+                    }
+
+
+                    // 纵轴线
+                    for(var i = x; i < xMax; i += gap) {
+                        ctx.moveTo(i, 0);
+                        ctx.lineTo(i, yMax);
+                    }
+
+                    for(var i = x; i > 0; i -= gap) {
+                        ctx.moveTo(i, 0);
+                        ctx.lineTo(i, yMax);
+                    }
+
+                    ctx.stroke();
                 }
 
-                for(var i = y; i > 0; i -= gap) {
-                    ctx.moveTo(0, i);
-                    ctx.lineTo(xMax, i);
-                }
-
-
-                // 纵轴线
-                for(var i = x; i < xMax; i += gap) {
-                    ctx.moveTo(i, 0);
-                    ctx.lineTo(i, yMax);
-                }
-
-                for(var i = x; i > 0; i -= gap) {
-                    ctx.moveTo(i, 0);
-                    ctx.lineTo(i, yMax);
-                }
-
-                ctx.stroke();
-
                 ctx.beginPath();
                 ctx.strokeStyle = config.gridColor || 'red';