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

fix viewer selection

Browse Source
This commit is contained in:
kekee000 2014-12-16 11:05:04 +08:00
parent 695ce18221
commit 9420c78826
6 changed files with 135 additions and 88 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -148,7 +148,7 @@ define(
}, 20);
}
});
dlg.show();
}).on('fontsetting', function(e) {
@ -215,7 +215,7 @@ define(
// 显示ttf列表
var showTTF = function(ttf, page, selected) {
program.viewer.setPage(page - 1);
program.viewer.show(ttf, selected || program.viewer.getSelected());
@ -251,7 +251,7 @@ define(
program.viewer.inited = true;
}
showTTF(e.ttf, 1);
showTTF(e.ttf, 1, []);
});

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

@ -1,7 +1,7 @@
/**
* @file setting-editor.js
* @author mengke01
* @date
* @date
* @description
* 编辑器设置选项
*/
@ -115,7 +115,7 @@ define(
+ '</div>';
return require('./setting').derive({
title: '编辑器设置',
getTpl: function() {
@ -132,7 +132,7 @@ define(
me.setFields(me.setting);
});
},
validate: function() {
var setting = this.getFields(this.setting);
return setting;

10
src/fonteditor/dialog/setting-find-glyf.js
View File

@ -1,10 +1,10 @@
/**
* @file setting-find-glyf.js
* @author mengke01
* @date
* @date
* @description
* 按unicode查找字形
*
*
*/
define(
@ -17,20 +17,20 @@ define(
+ '<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">'
+ '<input value="$" 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();

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

@ -1,7 +1,7 @@
/**
* @file GLYFViewer.js
* @author mengke01
* @date
* @date
* @description
* glyf 查看器
*/
@ -56,10 +56,11 @@ define(
}
// 显示glyf
function showGLYF(ttf, selectedList) {
function showGLYF(ttf) {
var unitsPerEm = ttf.head.unitsPerEm;
var descent = unitsPerEm + ttf.hhea.descent;
var selectedHash = {};
var selectedList = this.selectedList || [];
selectedList.forEach(function(i) {
selectedHash[i] = true;
});
@ -91,7 +92,7 @@ define(
var unitsPerEm = ttf.head.unitsPerEm;
var descent = unitsPerEm + ttf.hhea.descent;
var selectedHash = {};
var selectedList = this.getSelected();
var selectedList = this.selectedList || [];
selectedList.forEach(function(i) {
selectedHash[i] = true;
@ -125,18 +126,29 @@ define(
var action = target.attr('data-action');
var editing = this.getEditing();
var selectedGlyf = target.parent('[data-index]');
var selected = [+selectedGlyf.attr('data-index')];
var selected = +selectedGlyf.attr('data-index');
if (action == 'del' && !window.confirm('确定删除字形么？')) {
return;
if (action == 'del') {
if (!window.confirm('确定删除字形么？')) {
return;
}
else {
// 被选中的情况下需要移出
selectedGlyf.remove();
var selectedIndex = this.selectedList.indexOf(selected);
if (selectedIndex >= 0) {
this.selectedList.splice(selectedIndex, 1);
}
}
}
else if (action == 'edit') {
this.clearEditing();
this.setEditing(selected);
selectedGlyf.addClass('editing');
}
this.fire(action, {
list: selected
list: [selected]
});
}
@ -156,7 +168,7 @@ define(
y: pos.top + item.height() / 2
};
if (p.x >= bound.x && p.x <= bound.x + bound.width
if (p.x >= bound.x && p.x <= bound.x + bound.width
&& p.y >= bound.y && p.y <= bound.y + bound.height
) {
if (toggle) {
@ -175,7 +187,7 @@ define(
function downlistener(e) {
var me = this;
e.ctrlKey = e.ctrlKey || e.metaKey;
if (me.listening) {
// 阻止ctrl+A默认事件
if (65 === e.keyCode && e.ctrlKey) {
@ -223,7 +235,7 @@ define(
}
}
}
}
/**
@ -285,11 +297,24 @@ define(
x: Math.min(me.startX, x),
y: Math.min(me.startY, y),
width: width,
height: height
height: height
}, e.ctrlKey, e.shiftKey);
});
}
/**
* 获取选中的glyfIndex
*
* @return {Array} 选中的glyf列表
*/
function getSelectedGlyf() {
var selected = [];
this.main.find('.selected').each(function(index, item) {
selected.push(+item.getAttribute('data-index'));
});
return selected;
}
/**
* 绑定命令菜单
*/
@ -298,13 +323,15 @@ define(
var me = this;
me.on('selection:change', lang.debounce(function() {
var selected = me.getSelected();
var selected = getSelectedGlyf.call(me);
me.selectedList = selected;
if (selected.length) {
commandMenu.enableCommands(['copy', 'cut', 'del']);
commandMenu[selected.length === 1 ? 'enableCommands' : 'disableCommands'](['fontsetting']);
}
else {
commandMenu.disableCommands(['copy', 'cut', 'del', 'fontsetting']);
commandMenu.disableCommands(['copy', 'cut', 'del', 'fontsetting']);
}
}, 100));
@ -318,7 +345,7 @@ define(
var selected = me.getSelected();
// 取消选中的glyf
if (command === 'cut' || command === 'del') {
if (command === 'cut' || command === 'del') {
me.clearSelected();
}
@ -336,13 +363,13 @@ define(
/**
* glyf查看器
*
*
* @constructor
* @param {HTMLElement} main 主元素
* @param {Object} options 参数
*/
function GLYFViewer(main, options) {
this.options = lang.extend({
color: '', // 字形颜色
shapeSize: 'normal', // 字形大小
@ -352,6 +379,7 @@ define(
this.main = $(main);
this.mode = 'list';
this.page = 0;
this.selectedList = [];
bindEvents.call(this);
@ -384,7 +412,7 @@ define(
/**
* 设置分页
*
*
* @param {number} page 页码
*/
GLYFViewer.prototype.setPage = function(page) {
@ -393,7 +421,7 @@ define(
/**
* 获取分页
*
*
* @param {number} page 页码
*/
GLYFViewer.prototype.getPage = function() {
@ -402,66 +430,88 @@ define(
/**
* 显示ttf文档
*
*
* @param {Object} ttf ttfObject
* @param {Array?} selectedList 选中的列表
*
*
*/
GLYFViewer.prototype.show = function(ttf, selectedList) {
showGLYF.call(this, ttf, selectedList || []);
if (selectedList) {
this.setSelected(selectedList);
}
showGLYF.call(this, ttf);
this.fire('selection:change');
};
/**
* 刷新ttf文档
*
*
* @param {Object} ttf ttfObject
* @param {Array?} selectedList 选中的列表
* @param {Array?} indexList 需要刷新的列表
*/
GLYFViewer.prototype.refresh = function(ttf, indexList) {
if (!indexList || indexList.length === 0) {
showGLYF.call(this, ttf, indexList);
showGLYF.call(this, ttf);
}
else {
refreshGLYF.call(this, ttf, indexList);
}
this.fire('selection:change');
};
/**
* 设置选中的列表
*
* @param {Array?} selectedList 选中的列表
*/
GLYFViewer.prototype.setSelected = function(selectedList) {
this.selectedList = selectedList || [];
};
/**
* 获取选中的列表
*
*
* @return {Array} 选中的indexList
*/
GLYFViewer.prototype.getSelected = function() {
var selected = [];
this.main.find('.selected').each(function(index, item) {
selected.push(+item.getAttribute('data-index'));
});
return selected;
return this.selectedList;
};
/**
* 获取正在编辑的元素
*
* @return {Array} 选中的indexList
* 清除选中列表
*/
GLYFViewer.prototype.clearSelected = function() {
this.main.children().removeClass('selected');
this.selectedList = [];
};
/**
* 获取正在编辑的元素索引
*
* @return {number} 索引号
*/
GLYFViewer.prototype.getEditing = function() {
var editing = this.main.find('.editing')[0];
return editing ? +editing.getAttribute('data-index') : -1;
return this.editingIndex >= 0 ? this.editingIndex : -1;
};
/**
* 设置正在编辑的元素
* @param {number} editingIndex 设置对象
*/
GLYFViewer.prototype.setEditing = function(editingIndex) {
this.editingIndex = editingIndex >= 0 ? editingIndex : -1;
};
/**
* 清除正在编辑的元素
*
* @return {Array} 选中的indexList
*/
GLYFViewer.prototype.clearEditing = function() {
this.main.find('.editing').removeClass('editing');
this.editingIndex = -1;
};
/**
* 获取设置项目
* 改变设置项目
* @param {Object} options 设置对象
*/
GLYFViewer.prototype.setSetting = function(options) {
@ -494,13 +544,6 @@ define(
return this.options;
};
/**
* 清除选中列表
*/
GLYFViewer.prototype.clearSelected = function() {
this.main.children().removeClass('selected');
};
/**
* 设置编辑模式
* @param {string} mode 编辑模式
@ -512,25 +555,6 @@ define(
}
};
/**
* 设置选中的列表
*/
GLYFViewer.prototype.setSelected = function(selectedList) {
if (selectedList && 0 !== selectedList.length) {
var selectedHash = {};
selectedList.forEach(function(i) {
selectedHash[i] = true;
});
this.main.children().each(function(index, item) {
if (selectedHash[item.getAttribute('data-index')]) {
$(item).addClass('selected');
}
});
}
};
require('common/observable').mixin(GLYFViewer.prototype);
return GLYFViewer;

34
src/fonteditor/widget/pager.js
View File

@ -1,14 +1,14 @@
/**
* @file pager.js
* @author mengke01
* @date
* @date
* @description
* 分页组件
*/
define(
function(require) {
var lang = require('common/lang');
var observable = require('common/observable');
@ -22,7 +22,7 @@ define(
/**
* pager构造函数
*
*
* @constructor
* @param {HTMLElement} main 主元素
* @param {Object} options 参数
@ -32,6 +32,7 @@ define(
this.options = options || {};
this.main.html(PAGER_TPL);
this.textPage = this.main.find('input[data-pager="text"]');
var me = this;
me.main.on('click', 'button[data-pager]', function(e) {
@ -49,12 +50,17 @@ define(
page = me.page < me.totalPage ? me.page + 1 : me.totalPage;
}
else if (action === 'goto') {
var p = +me.main.find('[data-pager="text"]').val();
var p = +me.textPage.val();
if (p >= 1 && p <= me.totalPage) {
page = p;
}
else {
page = me.page;
}
}
me.textPage.val(page);
if (page !== me.page) {
me.page = page;
me.fire('change', {
@ -62,11 +68,26 @@ define(
});
}
});
me.textPage.on('keyup', function(e) {
if (e.keyCode === 13) {
var page = +this.value.trim();
if (page >= 1 && page <= me.totalPage) {
me.page = page;
me.fire('change', {
page: page
});
}
else {
this.value = me.page;
}
}
});
}
/**
* 显示pager
*
*
* @param {number} page 当前页码
* @param {number} pageSize 分页大小
* @param {number} total 总个数
@ -97,7 +118,8 @@ define(
* 注销
*/
Pager.prototype.dispose = function() {
this.main.off('click', 'button[data-pager]');
this.main.un('click', 'button[data-pager]');
me.main.find('input[data-pager="text"]').un('keyup');
};
observable.mixin(Pager.prototype);

13
src/fonteditor/widget/settingmanager.js
View File

@ -1,7 +1,7 @@
/**
* @file settingmanager.js
* @author mengke01
* @date
* @date
* @description
* 编辑器设置管理
*/
@ -24,7 +24,7 @@ define(
* 1. 首先从缓存中读取
* 2. 如果没有则加载保存的配置
* 3. 如果没有则加载默认的
*
*
* @param {string} name 设置名字
* @return {Object} 设置对象
*/
@ -42,7 +42,8 @@ define(
var data = storage.getItem('setting.' + name);
if (data) {
setting = JSON.parse(data);
// 因为有可能版本更新导致字段缺失，这里需要覆盖一下字段
setting = lang.overwrite(this.getDefault(name), JSON.parse(data));
}
else {
setting = this.getDefault(name);
@ -53,7 +54,7 @@ define(
/**
* 保存设置
*
*
* @param {string} name 设置名字
* @param {Object} setting 设置对象
* @param {boolean} store 是否保存对象
@ -85,7 +86,7 @@ define(
/**
* 是否已保存配置
*
*
* @param {string} name 名字
* @return {boolean} 是否已保存
*/
@ -95,7 +96,7 @@ define(
/**
* 根据名字获取设置
*
*
* @param {string} name 设置名字
* @return {Object} 设置对象
*/