modify editing selection
This commit is contained in:
@@ -46,13 +46,12 @@
|
||||
}
|
||||
|
||||
.i-edit {
|
||||
right: 20px;
|
||||
right: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
>.glyf-item:hover,
|
||||
>.selected {
|
||||
background: #232830;
|
||||
.glyf {
|
||||
border-color: #232830;
|
||||
}
|
||||
@@ -62,6 +61,8 @@
|
||||
}
|
||||
|
||||
>.glyf-item:hover {
|
||||
background: #3C619B;
|
||||
|
||||
.name {
|
||||
color: #FFF;
|
||||
}
|
||||
@@ -73,9 +74,21 @@
|
||||
}
|
||||
}
|
||||
|
||||
>.selected,
|
||||
>.selected:hover {
|
||||
background: #232830;
|
||||
}
|
||||
|
||||
>.editing,
|
||||
>.editing:hover {
|
||||
.glyf {
|
||||
border-color: #066BC5;
|
||||
}
|
||||
}
|
||||
|
||||
>.compound {
|
||||
.path {
|
||||
fill: lighten(#232830, 10%) !important;
|
||||
fill: lighten(#232830, 20%) !important;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -14,10 +14,10 @@ define(
|
||||
|
||||
// 移动步频
|
||||
var stepMap = {
|
||||
'left': [-5, 0],
|
||||
'right': [5, 0],
|
||||
'up': [0, -5],
|
||||
'down': [0, 5]
|
||||
'left': [-1, 0],
|
||||
'right': [1, 0],
|
||||
'up': [0, -1],
|
||||
'down': [0, 1]
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@@ -19,10 +19,10 @@ define(
|
||||
|
||||
// 移动步频
|
||||
var stepMap = {
|
||||
'left': [-5, 0],
|
||||
'right': [5, 0],
|
||||
'up': [0, -5],
|
||||
'down': [0, 5]
|
||||
'left': [-1, 0],
|
||||
'right': [1, 0],
|
||||
'up': [0, -1],
|
||||
'down': [0, 1]
|
||||
};
|
||||
|
||||
/**
|
||||
|
||||
@@ -62,10 +62,10 @@ define(
|
||||
alert('暂不支持复合字形!');
|
||||
}
|
||||
else {
|
||||
program.data.editingIndex = glyfIndex;
|
||||
program.editor.setFont(lang.clone(font));
|
||||
}
|
||||
}
|
||||
program.editor.focus();
|
||||
}
|
||||
};
|
||||
|
||||
@@ -74,9 +74,9 @@ define(
|
||||
$('.main').removeClass('editing');
|
||||
$('.editor').removeClass('editing');
|
||||
|
||||
program.data.editingIndex = -1;
|
||||
program.editor && program.editor.hide();
|
||||
|
||||
program.viewer.clearEditing();
|
||||
program.viewer.setMode('list');
|
||||
program.viewer.focus();
|
||||
};
|
||||
@@ -84,15 +84,6 @@ define(
|
||||
|
||||
program.viewer.on('del', function(e) {
|
||||
if (e.list) {
|
||||
|
||||
// 正在编辑中的不可被删除
|
||||
if (program.data.editingIndex !== -1) {
|
||||
var editingIndex = e.list.indexOf(program.data.editingIndex);
|
||||
if (editingIndex >= 0) {
|
||||
e.list.splice(editingIndex, 1);
|
||||
}
|
||||
}
|
||||
|
||||
program.ttfManager.removeGlyf(e.list);
|
||||
}
|
||||
}).on('edit', function(e) {
|
||||
@@ -147,8 +138,9 @@ define(
|
||||
|
||||
program.ttfManager.on('change', function(e) {
|
||||
// 保存正在编辑的字形
|
||||
if (e.changeType === 'update' && program.editor.isEditing() && program.data.editingIndex !== -1) {
|
||||
program.viewer.refresh(e.ttf, [program.data.editingIndex]);
|
||||
var editing = program.viewer.getEditing();
|
||||
if (e.changeType === 'update' && program.editor.isEditing() && editing !== -1) {
|
||||
program.viewer.refresh(e.ttf, [editing]);
|
||||
}
|
||||
else {
|
||||
program.viewer.show(e.ttf, program.viewer.getSelected());
|
||||
@@ -173,8 +165,9 @@ define(
|
||||
if (program.editor.isEditing()) {
|
||||
|
||||
// 如果是正在编辑的
|
||||
if (program.data.editingIndex !== -1) {
|
||||
program.ttfManager.replaceGlyf(program.editor.getFont(), program.data.editingIndex);
|
||||
var editing = program.viewer.getEditing();
|
||||
if (editing !== -1) {
|
||||
program.ttfManager.replaceGlyf(program.editor.getFont(), editing);
|
||||
}
|
||||
// 否则新建font
|
||||
else {
|
||||
|
||||
@@ -79,9 +79,7 @@ define(
|
||||
this.editor.setFont(font);
|
||||
}
|
||||
|
||||
this.editor.focus();
|
||||
this.editor.refresh();
|
||||
|
||||
this.editing = true;
|
||||
};
|
||||
|
||||
|
||||
@@ -14,7 +14,7 @@ define(
|
||||
var MouseCapture = require('render/capture/Mouse');
|
||||
|
||||
var GLYF_ITEM_TPL = ''
|
||||
+ '<div data-index="${index}" class="glyf-item ${compound} ${modify} ${selected}">'
|
||||
+ '<div data-index="${index}" class="glyf-item ${compound} ${modify} ${selected} ${editing}">'
|
||||
+ '<i data-action="edit" class="ico i-edit" title="编辑"></i>'
|
||||
+ '<i data-action="del" class="ico i-del" title="删除"></i>'
|
||||
+ '<svg class="glyf" viewbox="0 0 ${unitsPerEm} ${unitsPerEm}">'
|
||||
@@ -37,6 +37,7 @@ define(
|
||||
index: opt.index,
|
||||
compound: glyf.compound ? 'compound' : '',
|
||||
selected: opt.selected ? 'selected' : '',
|
||||
editing: opt.editing ? 'editing' : '',
|
||||
modify: glyf.modify,
|
||||
unitsPerEm: opt.unitsPerEm,
|
||||
descent: opt.descent,
|
||||
@@ -65,12 +66,14 @@ define(
|
||||
|
||||
var glyfStr = '';
|
||||
var color = this.options.color;
|
||||
var editing = this.getEditing();
|
||||
ttf.glyf.forEach(function(glyf, index) {
|
||||
glyfStr += getGlyfHTML(glyf, ttf, {
|
||||
index: index,
|
||||
unitsPerEm: unitsPerEm,
|
||||
descent: descent,
|
||||
selected: selectedHash[index],
|
||||
editing: editing === index,
|
||||
color: color
|
||||
});
|
||||
});
|
||||
@@ -91,12 +94,14 @@ 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,
|
||||
unitsPerEm: unitsPerEm,
|
||||
descent: descent,
|
||||
selected: selectedHash[index],
|
||||
editing: editing === index,
|
||||
color: color
|
||||
});
|
||||
var before = main.find('[data-index="'+ index +'"]');
|
||||
@@ -110,12 +115,18 @@ define(
|
||||
e.stopPropagation();
|
||||
var target = $(e.target);
|
||||
var action = target.attr('data-action');
|
||||
var editing = this.getEditing();
|
||||
var selectedGlyf = target.parent('[data-index]');
|
||||
var selected = [+selectedGlyf.attr('data-index')];
|
||||
|
||||
if (action == 'del' && !window.confirm('确定删除字形么?')) {
|
||||
return;
|
||||
}
|
||||
else if (action == 'edit') {
|
||||
this.clearEditing();
|
||||
selectedGlyf.addClass('editing');
|
||||
}
|
||||
|
||||
var selected = [+target.parent('[data-index]').attr('data-index')];
|
||||
this.fire(action, {
|
||||
list: selected
|
||||
});
|
||||
@@ -177,9 +188,10 @@ define(
|
||||
else if (27 === e.keyCode) {
|
||||
e.stopPropagation();
|
||||
me.clearSelected();
|
||||
me.clearEditing();
|
||||
me.fire('selection:change');
|
||||
}
|
||||
// 其他操作
|
||||
// 其他操作, del, copy, cut
|
||||
else if (keyMap[e.keyCode] && (e.keyCode == 46 || e.ctrlKey)) {
|
||||
e.stopPropagation();
|
||||
var selected = me.getSelected();
|
||||
@@ -187,6 +199,11 @@ define(
|
||||
// 取消选中的glyf
|
||||
if (e.keyCode == 46 || e.keyCode == 88) {
|
||||
me.clearSelected();
|
||||
// 正在编辑的
|
||||
var editing = selected.indexOf(me.getEditing());
|
||||
if (editing >= 0) {
|
||||
me.clearEditing();
|
||||
}
|
||||
me.fire('selection:change');
|
||||
}
|
||||
|
||||
@@ -388,6 +405,25 @@ define(
|
||||
return selected;
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取正在编辑的元素
|
||||
*
|
||||
* @return {Array} 选中的indexList
|
||||
*/
|
||||
GLYFViewer.prototype.getEditing = function() {
|
||||
var editing = this.main.find('.editing')[0];
|
||||
return editing ? +editing.getAttribute('data-index') : -1;
|
||||
};
|
||||
|
||||
/**
|
||||
* 清除正在编辑的元素
|
||||
*
|
||||
* @return {Array} 选中的indexList
|
||||
*/
|
||||
GLYFViewer.prototype.clearEditing = function() {
|
||||
this.main.find('.editing').removeClass('editing');
|
||||
};
|
||||
|
||||
/**
|
||||
* 获取设置项目
|
||||
*/
|
||||
|
||||
Reference in New Issue
Block a user