add setting reserve

README.md

@@ -19,4 +19,6 @@ fonteditor 在线ttf字体编辑器
 
 6. 2014-12-7 ttf编辑器增加百度编辑器样式.
 
-7. 2014-12-13 ttf编辑器增加列表和查看器命令栏，增加glyf点吸附.
+7. 2014-12-13 ttf编辑器增加列表和查看器命令栏，增加glyf点吸附.
+
+8. 2014-12-13 ttf编辑器增加设置保存.

edp-build-config.js

@@ -53,6 +53,7 @@ exports.getProcessors = function () {
                 'src/fonteditor/widget/*',
                 'src/fonteditor/widget/menu/*',
                 'src/fonteditor/controller/*',
+                'src/fonteditor/setting/*',
                 'src/fonteditor/data/*'
             ]
         })

src/common/string.js

@@ -107,6 +107,23 @@ define(
                     return str.slice(str.length - size);
                 }
                 return new Array(size - str.length + 1).join(ch || '0') + str;
+            },
+
+            /**
+             * 获取字符串哈希编码
+             * @param {string} str 字符串
+             * @return {number} 哈希值
+             */
+            hashcode: function(str) {
+                if (!str) {
+                    return 0;
+                }
+
+                var hash = 0;
+                for (var i = 0, l = str.length; i < l; i++) {
+                    hash = 0x7FFFFFFFF & (hash * 31 + str.charCodeAt(i));
+                }
+                return hash;
             }
         };
 

src/editor/controller/initSetting.js

@@ -44,10 +44,14 @@ define(
             this.execCommand('shapesorption', options.sorption.enableShape);
             this.execCommand('showgrid', options.axis.showGrid);
 
+            this.fontLayer.options.fill = !!options.fontLayer.fill;
             this.fontLayer.options.fillColor = options.fontLayer.fillColor;
+            this.fontLayer.options.strokeColor = options.fontLayer.strokeColor;
             this.fontLayer.refresh();
 
             this.axis.gapColor = options.axis.gapColor;
+            this.axis.metricsColor = options.axis.metricsColor;
+            this.axis.emColor = options.axis.emColor;
             this.axis.graduation.gap = options.axis.graduation.gap || 100;
             this.axisLayer.refresh();
             this.graduationLayer.refresh();

src/editor/options.js

@@ -41,15 +41,16 @@ define(
                 fontLayer: {
                     lineWidth: 1,
                     strokeColor: '#999',
+                    fill: true,
                     fillColor: '#555',
                 },
 
                 // 轴线
                 axis: {
                     showGrid: true, // 显示网格
-                    gapColor: '#A6A6FF',
-                    gridColor: 'red',
-                    emColor: 'red',
+                    gapColor: '#A6A6FF', // 网格线颜色
+                    metricsColor: 'red', // 测量辅助线颜色
+                    emColor: 'red', // em框颜色
 
                     // 字体测量规格
                     metrics: {

src/fonteditor/widget/actions.js → src/fonteditor/controller/actions.js

@@ -13,7 +13,8 @@ define(
         var program = require('../widget/program');
         var ajaxFile = require('common/ajaxFile');
         var string = require('common/string');
-
+        var lang = require('common/lang');
+
         // 读取在线字体
         function readOnlineFont(type, url) {
             ajaxFile({
@@ -298,16 +299,14 @@ define(
             'setting-editor': function(e) {
                 var dlg = new setting.editor({
                     onChange: function(setting) {
+                        program.setting.set('editor', setting, setting.saveSetting);
                         setTimeout(function() {
                             program.viewer.setSetting(setting.viewer);
                             program.editor.setSetting(setting.editor);
                         }, 20);
                     }
                 });
-                dlg.show({
-                    viewer: program.viewer.getSetting(),
-                    editor: program.editor.getSetting()
-                });
+                dlg.show(program.setting.get('editor'));
             }
         };
 

src/fonteditor/controller/default.js

@@ -12,7 +12,8 @@ define(
         var lang = require('common/lang');
         var clipboard = require('editor/widget/clipboard');
         var string = require('common/string');
-        var actions = require('../widget/actions');
+
+        var actions = require('./actions');
 
         // 获取ttf的编辑选项
         function getEditingOpt(ttf) {

src/fonteditor/dialog/setting-editor.js

@@ -11,6 +11,7 @@
 define(
     function(require) {
         var lang = require('common/lang');
+        var program = require('../widget/program');
 
         var tpl = ''
             + '<div class="form-inline">'
@@ -20,6 +21,17 @@ define(
             +         '<input data-field="viewer.color" type="text" class="form-control">'
             +       '</div>'
             +   '</div>'
+            +   '<div class="form-group">'
+            +       '<div class="input-group input-group-sm">'
+            +         '<span class="input-group-addon">字体列表大小</span>'
+            +           '<select data-field="viewer.shapeSize" class="form-control">'
+            +               '<option value="xlarge">特大</option>'
+            +               '<option value="large">大</option>'
+            +               '<option value="normal">中</option>'
+            +               '<option value="small">小</option>'
+            +           '</select>'
+            +       '</div>'
+            +   '</div>'
             + '</div>'
             + '<hr>'
 
@@ -37,45 +49,82 @@ define(
             +       '</div>'
             +   '</div>'
             + '</div>'
+
             + '<div class="form-inline">'
             +     '<div class="input-group input-group-sm">'
             +       '<span class="input-group-addon">显示网格</span>'
             +       '<span class="form-control"><input data-field="editor.axis.showGrid" type="checkbox"></span>'
             +     '</div>'
             + '</div>'
+
             + '<div class="form-inline">'
-            +   '<div class="input-group input-group-sm">'
-            +       '<span class="input-group-addon">轮廓颜色</span>'
-            +       '<input data-field="editor.fontLayer.fillColor" type="text" class="form-control">'
+            +   '<div class="form-group">'
+            +       '<div class="input-group input-group-sm">'
+            +           '<span class="input-group-addon">填充轮廓</span>'
+            +           '<span class="form-control"><input data-field="editor.fontLayer.fill" type="checkbox"></span>'
+            +       '</div>'
+            +   '</div>'
+            +   '<div class="form-group">'
+            +       '<div class="input-group input-group-sm">'
+            +           '<span class="input-group-addon">轮廓颜色</span>'
+            +           '<input data-field="editor.fontLayer.strokeColor" type="text" class="form-control">'
+            +       '</div>'
+            +   '</div>'
+            +   '<div class="form-group">'
+            +       '<div class="input-group input-group-sm">'
+            +           '<span class="input-group-addon">轮廓填充颜色</span>'
+            +           '<input data-field="editor.fontLayer.fillColor" type="text" class="form-control">'
+            +       '</div>'
             +   '</div>'
-            +  '</div>'
             + '</div>'
 
             + '<div class="form-inline">'
-            +   '<div class="input-group input-group-sm">'
-            +     '<span class="input-group-addon">网格线颜色</span>'
-            +     '<input data-field="editor.axis.gapColor" type="text" class="form-control">'
+            +   '<div class="form-group">'
+            +       '<div class="input-group input-group-sm">'
+            +         '<span class="input-group-addon">网格线颜色</span>'
+            +         '<input data-field="editor.axis.gapColor" type="text" class="form-control">'
+            +       '</div>'
+            +   '</div>'
+            +   '<div class="form-group">'
+            +       '<div class="input-group input-group-sm">'
+            +         '<span class="input-group-addon">网格线间距</span>'
+            +         '<input data-field="editor.axis.graduation.gap" type="number" class="form-control">'
+            +       '</div>'
             +   '</div>'
             + '</div>'
 
             + '<div class="form-inline">'
-            +   '<div class="input-group input-group-sm">'
-            +     '<span class="input-group-addon">网格线间距</span>'
-            +     '<input data-field="editor.axis.graduation.gap" type="text" class="form-control">'
+            +   '<div class="form-group">'
+            +       '<div class="input-group input-group-sm">'
+            +         '<span class="input-group-addon">度量线颜色</span>'
+            +         '<input data-field="editor.axis.metricsColor" type="text" class="form-control">'
+            +       '</div>'
             +   '</div>'
+            + '</div>'
+            + '<div class="form-inline">'
+            +   '<div class="input-group input-group-sm">'
+            +       '<span class="input-group-addon">保存设置</span>'
+            +       '<span class="form-control"><input data-field="saveSetting" type="checkbox"></span>'
+            +   '</div> <a href="#" id="setting-editor-efault">重置为默认设置</a>'
             + '</div>';
 
         return require('./setting').derive({
 
-            title: '设置',
+            title: '编辑器设置',
 
             getTpl: function() {
                 return tpl;
             },
 
             set: function(setting) {
-                this.setFields(setting);
                 this.setting = lang.clone(setting);
+                this.setFields(this.setting);
+                var me = this;
+                $('#setting-editor-efault').on('click', function(e) {
+                    e.preventDefault();
+                    me.setting = program.setting.getDefault('editor');
+                    me.setFields(me.setting);
+                });
             },
 
             validate: function() {

src/fonteditor/main.js

@@ -9,14 +9,16 @@
 define(
     function(require) {
 
+        var lang = require('common/lang');
         var GLYFViewer = require('./widget/glyfviewer');
         var GLYFEditor = require('./widget/glyfeditor');
         var ProjectViewer = require('./widget/projectviewer');
         var TTFManager = require('./widget/ttfmanager');
         var program = require('./widget/program');
-        var controller = require('./controller/default');
-        var actions = require('./widget/actions');
         var CommandMenu = require('./widget/commandmenu');
+
+        var controller = require('./controller/default');
+        var actions = require('./controller/actions');
 
         // 打开文件
         function onUpFile(e) {
@@ -86,24 +88,26 @@ define(
             init: function () {
                 bindEvent();
 
+                program.setting = require('./widget/settingmanager');
+
                 // glyf查看器命令组
-                program.viewerCommandMenu = new CommandMenu($('#glyf-list-commandmenu'), {
+                var viewerCommandMenu = new CommandMenu($('#glyf-list-commandmenu'), {
                     commands: require('./widget/menu/viewer')
                 });
 
                 // glyf查看器
                 program.viewer = new GLYFViewer($('#glyf-list'), {
-                    commandMenu: program.viewerCommandMenu
+                    commandMenu: viewerCommandMenu
                 });
 
                 // 字体查看器命令组
-                program.editorCommandMenu = new CommandMenu($('#editor-commandmenu'), {
+                var editorCommandMenu = new CommandMenu($('#editor-commandmenu'), {
                     commands: require('./widget/menu/editor')
                 });
 
                 // 字体查看器
                 program.editor = new GLYFEditor($('#glyf-editor'), {
-                    commandMenu: program.editorCommandMenu
+                    commandMenu: editorCommandMenu
                 });
 
                 // 项目管理
@@ -125,6 +129,14 @@ define(
                 // 加载项目
                 program.projectViewer.show(program.project.items());
 
+
+                // 加载用户设置
+                if (program.setting.isStored('editor')) {
+                    var setting = program.setting.get('editor');
+                    program.viewer.setSetting(setting.viewer);
+                    program.editor.setSetting(setting.editor);
+                }
+
             }
         };
 

src/fonteditor/setting/editor.js

@@ -0,0 +1,52 @@
+/**
+ * @file editor.js
+ * @author mengke01
+ * @date 
+ * @description
+ * 默认的编辑器设置
+ */
+
+define(
+    function(require) {
+
+        var setting = {
+
+            saveSetting: true, // 是否保存setting
+
+            // 查看器选项
+            viewer: {
+                color: "", // 查看器颜色
+                shapeSize: "normal" // 字形大小
+            },
+
+            // 编辑器选项
+            // see : editor/options.editor
+            editor: {
+                sorption: {
+                    enableGrid: false,
+                    enableShape: true
+                },
+                fontLayer: {
+                    strokeColor: '#999',
+                    fill: true,
+                    fillColor: '#555'
+                },
+                referenceline: {
+                    style: {
+                        strokeColor: '#0FF'
+                    }
+                },
+                axis: {
+                    showGrid: true,
+                    gapColor: '#A6A6FF',
+                    metricsColor: 'red',
+                    graduation: {
+                        gap: 100
+                    }
+                }
+            }
+        };
+
+        return setting;
+    }
+);