github/fonteditor
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

add list page

Browse Source 
add find by unicode
This commit is contained in:
kekee000
2014-12-16 03:26:58 +08:00
parent e8d9c4af37
commit cf2dbb7d66
17 changed files with 389 additions and 96 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
css/common/bootstrap.less vendored
View File

@@ -202,4 +202,25 @@ hr {
background: lighten(#707781, 15%);
pointer-events: none;
}
}
.pager {
margin: 0;
.form-control {
display: inline-block;
width: 40px;
height: 30px;
padding: 6px;
margin: 0 5px;
}
[data-pager="goto"] {
margin-right: 5px;
}
[data-pager="info"] {
margin: 0 5px;
color: #FFF;
}
}

10
css/common/common.less
View File

@@ -88,6 +88,16 @@ body, html {
margin-top: -40px;
display: none;
}
.pager {
position: absolute;
z-index: 10;
padding: 5px;
right: 0;
bottom: 0;
background: #707780;
display: none;
}
}

2
css/common/glyf-list.less
View File

@@ -88,7 +88,7 @@
>.compound {
.path {
fill: lighten(#232830, 20%) !important;
fill: lighten(green, 50%) !important;
}
}

1
index.html
View File

@@ -91,6 +91,7 @@
<section class="main">
<ul id="glyf-list-commandmenu" class="command-groups"></ul>
<div id="glyf-list-pager" class="pager"></div>
<div id="glyf-list" class="glyf-list"></div>
</section>

70
src/fonteditor/controller/actions.js
View File

@@ -198,76 +198,6 @@ define(
dlg.show();
},
// 调整字形信息
'setting-glyf': function() {
var ttf = program.ttfManager.get();
if (ttf) {
// 如果仅选择一个字形，则填充现有值
var selected = program.viewer.getSelected();
if (selected.length) {
var glyf = program.ttfManager.getGlyf(selected)[0];
!new setting['glyf']({
onChange: function(setting) {
program.ttfManager.updateGlyf(setting, selected[0]);
}
}).show({
unicode: glyf.unicode,
leftSideBearing: glyf.leftSideBearing,
rightSideBearing: glyf.advanceWidth - (glyf.xMax || 0),
name: glyf.name
});
}
else {
alert('请选中一个字形!');
}
}
},
// 调整字形位置
'setting-adjust-pos': function() {
var ttf = program.ttfManager.get();
if (ttf) {
// 如果仅选择一个字形，则填充现有值
var selected = program.viewer.getSelected();
var opt = {};
if (selected.length === 1) {
var glyf = program.ttfManager.getGlyf(selected)[0];
opt = {
unicode: glyf.unicode,
leftSideBearing: glyf.leftSideBearing,
rightSideBearing: glyf.advanceWidth - glyf.xMax
};
}
!new setting['adjust-pos']({
onChange: function(setting) {
setTimeout(function() {
program.ttfManager.adjustGlyfPos(setting, selected);
}, 20);
}
}).show(opt);
}
},
// 调整字形
'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();

113
src/fonteditor/controller/default.js
View File

@@ -12,7 +12,7 @@ define(
var lang = require('common/lang');
var clipboard = require('editor/widget/clipboard');
var string = require('common/string');
var setting = require('../widget/setting');
var actions = require('./actions');
// 获取ttf的编辑选项
@@ -115,11 +115,81 @@ define(
}).on('redo', function(e) {
program.ttfManager.redo();
}).on('adjust-pos', function(e) {
actions['setting-adjust-pos']();
var ttf = program.ttfManager.get();
// 如果仅选择一个字形，则填充现有值
var selected = program.viewer.getSelected();
var opt = {};
if (selected.length === 1) {
var glyf = program.ttfManager.getGlyf(selected)[0];
opt = {
unicode: glyf.unicode,
leftSideBearing: glyf.leftSideBearing,
rightSideBearing: glyf.advanceWidth - glyf.xMax
};
}
!new setting['adjust-pos']({
onChange: function(setting) {
setTimeout(function() {
program.ttfManager.adjustGlyfPos(setting, selected);
}, 20);
}
}).show(opt);
}).on('adjust-glyf', function(e) {
actions['setting-adjust-glyf']();
}).on('info', function(e) {
actions['setting-glyf']();
var ttf = program.ttfManager.get();
var dlg = new setting['adjust-glyf']({
onChange: function(setting) {
setTimeout(function() {
program.ttfManager.adjustGlyf(setting, program.viewer.getSelected());
}, 20);
}
});
dlg.show();
}).on('fontsetting', function(e) {
var ttf = program.ttfManager.get();
// 如果仅选择一个字形，则填充现有值
var selected = program.viewer.getSelected();
if (selected.length) {
var glyf = program.ttfManager.getGlyf(selected)[0];
!new setting['glyf']({
onChange: function(setting) {
program.ttfManager.updateGlyf(setting, selected[0]);
}
}).show({
unicode: glyf.unicode,
leftSideBearing: glyf.leftSideBearing,
rightSideBearing: glyf.advanceWidth - (glyf.xMax || 0),
name: glyf.name
});
}
}).on('find-glyf', function(e) {
var dlg = new setting['find-glyf']({
onChange: function(setting) {
var index = program.ttfManager.findGlyf(setting.unicode[0]);
if (-1 !== index) {
var pageSize = program.setting.get('editor').viewer.pageSize;
var page = Math.ceil(index / pageSize);
showTTF(program.ttfManager.get(), page, [index]);
}
else {
alert('未找到相关字形!');
}
}
});
dlg.show();
}).on('refresh', function() {
showTTF(program.ttfManager.get(), 1);
});
program.projectViewer.on('open', function(e) {
@@ -139,6 +209,30 @@ define(
program.viewer.focus();
});
program.viewerPager.on('change', function(e) {
showTTF(program.ttfManager.get(), e.page);
});
// 显示ttf列表
var showTTF = function(ttf, page, selected) {
program.viewer.setPage(page - 1);
program.viewer.show(ttf, selected || program.viewer.getSelected());
program.viewer.focus();
// 设置翻页
var glyfTotal = ttf.glyf.length;
var pageSize = program.setting.get('editor').viewer.pageSize;
if (glyfTotal > pageSize) {
program.viewerPager.show(page, pageSize, glyfTotal);
}
else {
program.viewerPager.hide();
}
}
program.ttfManager.on('change', function(e) {
// 保存正在编辑的字形
var editing = program.viewer.getEditing();
@@ -146,9 +240,9 @@ define(
program.viewer.refresh(e.ttf, [editing]);
}
else {
program.viewer.show(e.ttf, program.viewer.getSelected());
program.viewer.focus();
showTTF(e.ttf, program.viewer.getPage() + 1);
}
}).on('set', function(e) {
// 未初始化状态，命令栏是不显示的，需要设置下编辑模式
@@ -156,8 +250,9 @@ define(
program.viewer.setMode('list');
program.viewer.inited = true;
}
program.viewer.show(e.ttf, program.viewer.getSelected());
program.viewer.focus();
showTTF(e.ttf, 1);
});

6
src/fonteditor/dialog/setting-editor.js
View File

@@ -32,6 +32,12 @@ define(
+ '</select>'
+ '</div>'
+ '</div>'
+ '<div class="form-group">'
+ '<div class="input-group input-group-sm">'
+ '<span class="input-group-addon">分页个数</span>'
+ '<input data-field="viewer.pageSize" type="number" class="form-control">'
+ '</div>'
+ '</div>'
+ '</div>'
+ '<hr>'

47
src/fonteditor/dialog/setting-find-glyf.js Normal file
View File

@@ -0,0 +1,47 @@
/**
* @file setting-find-glyf.js
* @author mengke01
* @date
* @description
* 按unicode查找字形
*
*/
define(
function(require) {
var string = require('ttf/util/string');
var unicodeREG = /^(?:\$[A-F0-9]+)$/gi;
var tpl = ''
+ '<div class="form-inline">'
+ '<div class="input-group input-group-sm">'
+ '<span class="input-group-addon">unicode</span>'
+ '<input data-field="unicode" data-type="unicode" id="setting-glyf-unicode" class="form-control">'
+ '</div>'
+ '&nbsp;&nbsp;<span>例如："$21"</span>'
+ '</div>';
return require('./setting').derive({
title: '查找字形',
getTpl: function() {
return tpl;
},
validate: function() {
var unicode = $('#setting-glyf-unicode').val();
if (unicode && !unicode.match(unicodeREG)) {
alert('unicode不正确!');
return false;
}
return this.getFields();
}
});
}
);

2
src/fonteditor/dialog/setting.js
View File

@@ -141,6 +141,7 @@ define(
/**
* 设置field字段值
*
* @param {Object} setting 原始对象
* @return {boolean}
*/
Setting.prototype.setFields = function(setting) {
@@ -188,6 +189,7 @@ define(
/**
* 获取field字段值
*
* @param {Object} setting 原始对象
* @return {Object}
*/
Setting.prototype.getFields = function(setting) {

5
src/fonteditor/main.js
View File

@@ -16,7 +16,8 @@ define(
var TTFManager = require('./widget/ttfmanager');
var program = require('./widget/program');
var CommandMenu = require('./widget/commandmenu');
var Pager = require('./widget/pager');
var controller = require('./controller/default');
var actions = require('./controller/actions');
@@ -95,6 +96,8 @@ define(
commands: require('./widget/menu/viewer')
});
program.viewerPager = new Pager($('#glyf-list-pager'));
// glyf查看器
program.viewer = new GLYFViewer($('#glyf-list'), {
commandMenu: viewerCommandMenu

3
src/fonteditor/setting/editor.js
View File

@@ -16,7 +16,8 @@ define(
// 查看器选项
viewer: {
color: "", // 查看器颜色
shapeSize: "normal" // 字形大小
shapeSize: "normal", // 字形大小
pageSize: 100, // 翻页大小
},
// 编辑器选项

2
src/fonteditor/widget/glyfeditor.js
View File

@@ -88,7 +88,7 @@ define(
commandMenu.on('command', function(e) {
// 这里延时进行focus
setTimeout(function() {
lang.debounce(function() {
me.focus();
}, 20);

64
src/fonteditor/widget/glyfviewer.js
View File

@@ -60,14 +60,19 @@ define(
var unitsPerEm = ttf.head.unitsPerEm;
var descent = unitsPerEm + ttf.hhea.descent;
var selectedHash = {};
(selectedList || []).forEach(function(i) {
selectedList.forEach(function(i) {
selectedHash[i] = true;
});
var glyfStr = '';
var color = this.options.color;
var editing = this.getEditing();
ttf.glyf.forEach(function(glyf, index) {
var startIndex = this.page * this.options.pageSize;
var endIndex = startIndex + this.options.pageSize;
var glyfsegment = ttf.glyf.slice(startIndex, endIndex);
glyfsegment.forEach(function(glyf, i) {
var index = startIndex + i;
glyfStr += getGlyfHTML(glyf, ttf, {
index: index,
unitsPerEm: unitsPerEm,
@@ -95,6 +100,7 @@ define(
var main = this.main;
var color = this.options.color;
var editing = this.getEditing();
indexList.forEach(function (index) {
var glyfStr = getGlyfHTML(ttf.glyf[index], ttf, {
index: index,
@@ -105,8 +111,10 @@ define(
color: color
});
var before = main.find('[data-index="'+ index +'"]');
$(glyfStr).insertBefore(before);
before.remove();
if (before.length) {
$(glyfStr).insertBefore(before);
before.remove();
}
});
}
@@ -320,7 +328,7 @@ define(
}
// 这里延时进行focus
setTimeout(function() {
lang.debounce(function() {
me.focus();
}, 20);
});
@@ -336,11 +344,14 @@ define(
function GLYFViewer(main, options) {
this.options = lang.extend({
color: '',
shapeSize: 'normal'
color: '', // 字形颜色
shapeSize: 'normal', // 字形大小
pageSize: 100 // 分页大小，如果字形个数超过100 则自动分页
}, options);
this.main = $(main);
this.mode = 'list';
this.page = 0;
bindEvents.call(this);
@@ -371,14 +382,33 @@ define(
}
};
/**
* 设置分页
*
* @param {number} page 页码
*/
GLYFViewer.prototype.setPage = function(page) {
this.page = page || 0;
};
/**
* 获取分页
*
* @param {number} page 页码
*/
GLYFViewer.prototype.getPage = function() {
return this.page;
};
/**
* 显示ttf文档
*
* @param {Object} ttf ttfObject
* @param {Array?} selectedList 选中的列表
*
*/
GLYFViewer.prototype.show = function(ttf, selectedList) {
showGLYF.call(this, ttf, selectedList);
showGLYF.call(this, ttf, selectedList || []);
this.fire('selection:change');
};
@@ -436,15 +466,25 @@ define(
GLYFViewer.prototype.setSetting = function(options) {
var oldOptions = this.options;
if (options.color !== oldOptions.color) {
this.main.find('path').css('fill', options.color);
}
if (options.shapeSize !== oldOptions.shapeSize) {
this.main.removeClass(oldOptions.shapeSize);
this.main.addClass(options.shapeSize);
}
var needRefresh = false
if (options.color !== oldOptions.color) {
needRefresh = true;
}
if (options.pageSize !== oldOptions.pageSize) {
needRefresh = true;
}
this.options = lang.overwrite(oldOptions, options);
if (needRefresh) {
this.fire('refresh');
}
};
/**

7
src/fonteditor/widget/menu/viewer.js
View File

@@ -48,6 +48,13 @@ define(
name: 'fontsetting',
title: '字形信息',
disabled: true
},
{
type: 'split'
},
{
name: 'find-glyf',
title: '查找字形'
}
];
}

107
src/fonteditor/widget/pager.js Normal file
View File

@@ -0,0 +1,107 @@
/**
* @file pager.js
* @author mengke01
* @date
* @description
* 分页组件
*/
define(
function(require) {
var lang = require('common/lang');
var observable = require('common/observable');
var PAGER_TPL = ''
+ '<button data-pager="prev" type="button" class="btn btn-flat btn-new btn-sm">上一页</button>'
+ '<input data-pager="text" type="text" class="form-control">'
+ '<span data-pager="info"></span>'
+ '<button data-pager="goto" type="button" class="btn btn-flat btn-new btn-sm">转到</button>'
+ '<button data-pager="next" type="button" class="btn btn-flat btn-new btn-sm">下一页</button>';
/**
* pager构造函数
*
* @constructor
* @param {HTMLElement} main 主元素
* @param {Object} options 参数
*/
function Pager(main, options) {
this.main = $(main);
this.options = options || {};
this.main.html(PAGER_TPL);
var me = this;
me.main.on('click', 'button[data-pager]', function(e) {
if (this.getAttribute('data-disabled')) {
return;
}
var action = this.getAttribute('data-pager');
var page = me.page;
if (action === 'prev') {
page = me.page > 1 ? me.page - 1 : 1;
}
else if (action === 'next') {
page = me.page < me.totalPage ? me.page + 1 : me.totalPage;
}
else if (action === 'goto') {
var p = +me.main.find('[data-pager="text"]').val();
if (p >= 1 && p <= me.totalPage) {
page = p;
}
}
if (page !== me.page) {
me.page = page;
me.fire('change', {
page: page
});
}
});
}
/**
* 显示pager
*
* @param {number} page 当前页码
* @param {number} pageSize 分页大小
* @param {number} total 总个数
*/
Pager.prototype.show = function(page, pageSize, total) {
if (total <= pageSize) {
this.hide();
}
else {
this.page = page;
this.totalPage = Math.ceil(total / pageSize);
this.main.find('[data-pager="text"]').val(page);
this.main.find('[data-pager="info"]').html('/ ' + this.totalPage);
this.main.find('[data-pager="prev"]')[page === 1 ? 'attr' : 'removeAttr']('data-disabled', 1);
this.main.find('[data-pager="next"]')[page === this.totalPage ? 'attr' : 'removeAttr']('data-disabled', 1);
}
this.main.show();
};
/**
* 隐藏
*/
Pager.prototype.hide = function() {
this.main.hide();
};
/**
* 注销
*/
Pager.prototype.dispose = function() {
this.main.off('click', 'button[data-pager]');
};
observable.mixin(Pager.prototype);
return Pager;
}
);

3
src/fonteditor/widget/setting.js
View File

@@ -17,7 +17,8 @@ define(
'online': require('../dialog/font-online'),
'url': require('../dialog/font-url'),
'glyf': require('../dialog/setting-glyf'),
'editor': require('../dialog/setting-editor')
'editor': require('../dialog/setting-editor'),
'find-glyf': require('../dialog/setting-find-glyf')
};
}
);

22
src/fonteditor/widget/ttfmanager.js
View File

@@ -91,6 +91,28 @@ define(
return this.ttf.get();
};
/**
* 查找glyf
*
* @param {number} unicode 编码
*
* @return {number} 没有找到返回 -1, 找到返回glyf索引
*/
Manager.prototype.findGlyf = function(unicode) {
var glyfList = this.ttf.getGlyf();
// 查找单个unicode
for (var i = 0, l = glyfList.length; i < l ; i++) {
var g = glyfList[i];
if (g.unicode && g.unicode.length && g.unicode.indexOf(unicode) >= 0) {
return i;
}
}
return -1;
};
/**
* 添加glyf
*