From 3c0dbbec71aa4325bae24610068978305381ba9c Mon Sep 17 00:00:00 2001 From: mkwiser Date: Fri, 10 Oct 2014 22:39:49 +0800 Subject: [PATCH] =?UTF-8?q?=E6=8B=86=E5=88=86=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- demo/js/glyfcanvas.js | 6 +- demo/js/glyfsvg.js | 7 +- demo/js/woff2ttf.js | 2 +- src/fonteditor/ttf/main.js | 223 ++----------------------------- src/fonteditor/widget/actions.js | 206 ++++++++++++++++++++++++++++ src/fonteditor/widget/setting.js | 23 ++++ 6 files changed, 253 insertions(+), 214 deletions(-) create mode 100644 src/fonteditor/widget/actions.js create mode 100644 src/fonteditor/widget/setting.js diff --git a/demo/js/glyfcanvas.js b/demo/js/glyfcanvas.js index 87c21ef..7807404 100644 --- a/demo/js/glyfcanvas.js +++ b/demo/js/glyfcanvas.js @@ -47,7 +47,9 @@ define( function showGlyf(charcode) { var glyf = lang.clone(ttf.getCodeGlyf(charcode)); - + if (glyf.compound) { + return; + } var canvas = $('#glyf-canvas').get(0); var ctx = canvas.getContext('2d'); @@ -101,7 +103,7 @@ define( upFile.addEventListener('change', onUpFileChange); ajaxBinaryFile({ - url: '../font/baiduHealth.ttf', + url: '../test/baiduHealth.ttf', onSuccess: function(binaryData) { setFont(binaryData); diff --git a/demo/js/glyfsvg.js b/demo/js/glyfsvg.js index 414578c..393b20f 100644 --- a/demo/js/glyfsvg.js +++ b/demo/js/glyfsvg.js @@ -49,6 +49,7 @@ define( } function showGlyf(charcode) { + var tpl = '' + '' + ' ' @@ -58,6 +59,10 @@ define( var svg = $(tpl); var glyf = lang.clone(ttf.getCodeGlyf(charcode)); + if (glyf.compound) { + return; + } + // 调整大小 var width = glyf.xMax; var height = glyf.yMax - glyf.yMin; @@ -113,7 +118,7 @@ define( upFile.addEventListener('change', onUpFileChange); ajaxBinaryFile({ - url: '../font/baiduHealth.ttf', + url: '../test/baiduHealth.ttf', onSuccess: function(binaryData) { setFont(binaryData); diff --git a/demo/js/woff2ttf.js b/demo/js/woff2ttf.js index 2b65ba2..1b634e8 100644 --- a/demo/js/woff2ttf.js +++ b/demo/js/woff2ttf.js @@ -17,7 +17,7 @@ define( function write() { ajaxBinaryFile({ - url: '../font/iconfont.woff', + url: '../test/iconfont.woff', onSuccess: function(buffer) { var ttfBuffer = woff2ttf(buffer, { diff --git a/src/fonteditor/ttf/main.js b/src/fonteditor/ttf/main.js index d86f89d..caf216f 100644 --- a/src/fonteditor/ttf/main.js +++ b/src/fonteditor/ttf/main.js @@ -10,220 +10,18 @@ define( function(require) { var GLYFViewer = require('../widget/glyfviewer'); - var loader = require('../widget/loader'); - var exporter = require('../widget/exporter'); - var project = require('../widget/project'); var ProjectViewer = require('../widget/projectviewer'); var TTFManager = require('../widget/ttfmanager'); var program = require('../widget/program'); var controller = require('../widget/controller/default'); - var ajaxBinaryFile = require('common/ajaxBinaryFile'); - - var string = require('common/string'); - - - var setting = { - 'unicode': require('../dialog/setting-unicode'), - 'name': require('../dialog/setting-name'), - //'adjust-pos': require('../dialog/setting-adjust-pos'), - //'adjust-glyf': require('../dialog/setting-adjust-glyf'), - 'metrics': require('../dialog/setting-metrics'), - 'online': require('../dialog/font-online') - } - - var actions = { - - // 新建 - 'new': function() { - if (program.ttfmanager.isChanged() && !window.confirm('是否放弃保存当前项目?')) { - return; - } - $.getJSON('./src/fonteditor/data/empty.json', function(imported) { - program.ttfmanager.set(imported); - program.data.projectName = null; - }); - }, - - // 打开 - 'open': function() { - $('#font-import').click(); - }, - - // 导入 - 'import': function() { - $('#font-import').click(); - }, - - // 导出 - 'export': function() { - - }, - - // 导出文件 - 'export-file': function(e) { - if (program.ttfmanager.get()) { - var target = $(e.target); - exporter.export(program.ttfmanager.get(), { - type: target.attr('data-type'), - target: target - }); - } - }, - - // 保存项目 - 'save': function() { - if (program.ttfmanager.get()) { - var name = ''; - if(name = window.prompt('请输入项目名称：')) { - name = string.encodeHTML(name); - var list = project.add(name, program.ttfmanager.get()); - program.projectViewer.show(list); - program.data.projectName = name; - program.ttfmanager.setState('new'); - } - } - }, - - // 添加新字形 - 'add-new': function() { - program.ttfmanager.addGlyf({ - name: '', - unicode:[] - }); - }, - - // 添加在线字形 - 'add-online': function() { - var dlg = new setting.online({ - onChange: function(url) { - // 此处延迟处理 - setTimeout(function(){ - program.loading.show('正在加载..', 1000); - ajaxBinaryFile({ - url: url, - onSuccess: function(buffer) { - loader.load(buffer, { - type: 'ttf', - success: function(imported) { - program.loading.hide(); - if (program.ttfmanager.get()) { - program.ttfmanager.merge(imported, { - scale: true - }); - } - else { - program.ttfmanager.set(imported); - program.data.projectName = null; - } - - } - }); - }, - onError: function() { - alert('加载文件错误!'); - } - }); - }, 20); - } - }); - - dlg.show(); - }, - - // 设置unicode - 'setting-unicode': function() { - var dlg = new setting.unicode({ - onChange: function(unicode) { - // 此处延迟处理 - setTimeout(function(){ - if (program.ttfmanager.get()) { - var glyfList = program.viewer.getSelected(); - program.ttfmanager.setUnicode(unicode, glyfList); - } - }, 20); - } - }); - - dlg.show(); - }, - - // 调整字形位置 - 'setting-adjust-pos': function() { - var ttf = program.ttfmanager.get(); - if (ttf) { - var dlg = new setting['adjust-pos']({ - onChange: function(setting) { - setTimeout(function() { - program.ttfmanager.adjustGlyfPos(setting, selected); - }, 20); - } - }); - - // 如果仅选择一个字形，则填充现有值 - var selected = program.viewer.getSelected(); - if (selected.length === 1) { - var glyf = program.ttfmanager.getGlyf(selected)[0]; - dlg.show({ - leftSideBearing: glyf.leftSideBearing || '', - rightSideBearing: glyf.advanceWidth - glyf.xMax || '' - }); - } - else { - dlg.show(); - } - } - }, - - // 调整字形 - 'setting-adjust-glyf': function() { - var ttf = program.ttfmanager.get(); - if (ttf) { - var dlg = new setting['adjust-glyf']({ - onChange: function(setting) { - setTimeout(function() { - program.ttfmanager.adjustGlyf(setting, program.viewer.getSelected()); - }, 20); - } - }); - - dlg.show(); - } - }, - - // 设置字体名称 - 'setting-name': function() { - var ttf = program.ttfmanager.get(); - if (ttf) { - var dlg = new setting.name({ - onChange: function(setting) { - program.ttfmanager.setInfo(setting); - } - }); - dlg.show($.extend({}, ttf.head, ttf.name)); - } - }, - - // 调整规格 - 'setting-metrics': function() { - var ttf = program.ttfmanager.get(); - if (ttf) { - var dlg = new setting['metrics']({ - onChange: function(setting) { - program.ttfmanager.setMetrics(setting); - } - }); - - dlg.show($.extend({}, ttf['OS/2'], ttf.hhea, ttf.post)); - } - } - }; + var actions = require('../widget/actions'); // 打开文件 function onUpFile(e) { var file = e.target.files[0]; - if (program.action == 'open' && file.name.match(/(\.ttf|\.woff)$/i)) { - loader.load(file, { + if (program.data.action == 'open' && file.name.match(/(\.ttf|\.woff)$/i)) { + program.loader.load(file, { type: file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase(), success: function(imported) { program.ttfmanager.set(imported); @@ -231,9 +29,9 @@ define( } }); } - else if (program.action == 'import' && file.name.match(/(\.ttf|\.woff|\.svg)$/i)) { + else if (program.data.action == 'import' && file.name.match(/(\.ttf|\.woff|\.svg)$/i)) { if (program.ttfmanager.get()) { - loader.load(file, { + program.loader.load(file, { type: file.name.slice(file.name.lastIndexOf('.') + 1).toLowerCase(), success: function(imported) { if (imported.glyf.length) { @@ -255,7 +53,7 @@ define( $('.navbar').delegate('[data-action]', 'click', function(e) { var action = $(this).attr('data-action'); if (actions[action]) { - program.action = action; + program.data.action = action; actions[action].call(this, e); } }); @@ -279,16 +77,21 @@ define( program.viewer = new GLYFViewer($('#glyf-list')); // 项目管理 - program.project = project; + program.project = require('../widget/project'); program.projectViewer = new ProjectViewer($('#project-list')); // ttf管理 program.ttfmanager = new TTFManager(); + // 导入导出器 + program.loader = require('../widget/loader'); + program.exporter = require('../widget/exporter'); + + controller.init(program); // 加载项目 - program.projectViewer.show(project.items()); + program.projectViewer.show(program.project.items()); } }; diff --git a/src/fonteditor/widget/actions.js b/src/fonteditor/widget/actions.js new file mode 100644 index 0000000..a69b560 --- /dev/null +++ b/src/fonteditor/widget/actions.js @@ -0,0 +1,206 @@ +/** + * @file actions.js + * @author mengke01 + * @date + * @description + * 命令接口 + */ + + +define( + function(require) { + var setting = require('../widget/setting'); + var program = require('../widget/program'); + var ajaxBinaryFile = require('common/ajaxBinaryFile'); + var string = require('common/string'); + + var actions = { + + // 新建 + 'new': function() { + if (program.ttfmanager.isChanged() && !window.confirm('是否放弃保存当前项目?')) { + return; + } + $.getJSON('./src/fonteditor/data/empty.json', function(imported) { + program.ttfmanager.set(imported); + program.data.projectName = null; + }); + }, + + // 打开 + 'open': function() { + $('#font-import').click(); + }, + + // 导入 + 'import': function() { + $('#font-import').click(); + }, + + // 导出 + 'export': function() { + + }, + + // 导出文件 + 'export-file': function(e) { + if (program.ttfmanager.get()) { + var target = $(e.target); + program.exporter.export(program.ttfmanager.get(), { + type: target.attr('data-type'), + target: target + }); + } + }, + + // 保存项目 + 'save': function() { + if (program.ttfmanager.get()) { + var name = ''; + if(name = window.prompt('请输入项目名称：')) { + name = string.encodeHTML(name); + var list = program.project.add(name, program.ttfmanager.get()); + program.projectViewer.show(list); + program.data.projectName = name; + program.ttfmanager.setState('new'); + } + } + }, + + // 添加新字形 + 'add-new': function() { + program.ttfmanager.addGlyf({ + name: '', + unicode:[] + }); + }, + + // 添加在线字形 + 'add-online': function() { + var dlg = new setting.online({ + onChange: function(url) { + // 此处延迟处理 + setTimeout(function(){ + program.loading.show('正在加载..', 1000); + ajaxBinaryFile({ + url: url, + onSuccess: function(buffer) { + program.loader.load(buffer, { + type: 'ttf', + success: function(imported) { + program.loading.hide(); + if (program.ttfmanager.get()) { + program.ttfmanager.merge(imported, { + scale: true + }); + } + else { + program.ttfmanager.set(imported); + program.data.projectName = null; + } + + } + }); + }, + onError: function() { + alert('加载文件错误!'); + } + }); + }, 20); + } + }); + + dlg.show(); + }, + + // 设置unicode + 'setting-unicode': function() { + var dlg = new setting.unicode({ + onChange: function(unicode) { + // 此处延迟处理 + setTimeout(function(){ + if (program.ttfmanager.get()) { + var glyfList = program.viewer.getSelected(); + program.ttfmanager.setUnicode(unicode, glyfList); + } + }, 20); + } + }); + + dlg.show(); + }, + + // 调整字形位置 + 'setting-adjust-pos': function() { + var ttf = program.ttfmanager.get(); + if (ttf) { + var dlg = new setting['adjust-pos']({ + onChange: function(setting) { + setTimeout(function() { + program.ttfmanager.adjustGlyfPos(setting, selected); + }, 20); + } + }); + + // 如果仅选择一个字形，则填充现有值 + var selected = program.viewer.getSelected(); + if (selected.length === 1) { + var glyf = program.ttfmanager.getGlyf(selected)[0]; + dlg.show({ + leftSideBearing: glyf.leftSideBearing || '', + rightSideBearing: glyf.advanceWidth - glyf.xMax || '' + }); + } + else { + dlg.show(); + } + } + }, + + // 调整字形 + 'setting-adjust-glyf': function() { + var ttf = program.ttfmanager.get(); + if (ttf) { + var dlg = new setting['adjust-glyf']({ + onChange: function(setting) { + setTimeout(function() { + program.ttfmanager.adjustGlyf(setting, program.viewer.getSelected()); + }, 20); + } + }); + + dlg.show(); + } + }, + + // 设置字体名称 + 'setting-name': function() { + var ttf = program.ttfmanager.get(); + if (ttf) { + var dlg = new setting.name({ + onChange: function(setting) { + program.ttfmanager.setInfo(setting); + } + }); + dlg.show($.extend({}, ttf.head, ttf.name)); + } + }, + + // 调整规格 + 'setting-metrics': function() { + var ttf = program.ttfmanager.get(); + if (ttf) { + var dlg = new setting['metrics']({ + onChange: function(setting) { + program.ttfmanager.setMetrics(setting); + } + }); + + dlg.show($.extend({}, ttf['OS/2'], ttf.hhea, ttf.post)); + } + } + }; + + return actions; + } +); diff --git a/src/fonteditor/widget/setting.js b/src/fonteditor/widget/setting.js new file mode 100644 index 0000000..5cb5dec --- /dev/null +++ b/src/fonteditor/widget/setting.js @@ -0,0 +1,23 @@ +/** + * @file setting.js + * @author mengke01 + * @date + * @description + * 设置项目 + */ + +define( + function(require) { + + var setting = { + 'unicode': require('../dialog/setting-unicode'), + 'name': require('../dialog/setting-name'), + 'adjust-pos': require('../dialog/setting-adjust-pos'), + 'adjust-glyf': require('../dialog/setting-adjust-glyf'), + 'metrics': require('../dialog/setting-metrics'), + 'online': require('../dialog/font-online') + } + + return setting; + } +);