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

增加二级菜单

Browse Source
This commit is contained in:
mkwiser
2014-11-01 00:19:48 +08:00
parent b27301258d
commit b1550e3be5
13 changed files with 207 additions and 339 deletions
Download Patch File Download Diff File Expand all files Collapse all files

1
css/common/common.less
View File

@@ -1,3 +1,4 @@
@import './reset.less';
@import './bootstrap.less';

95
css/common/editor.less
View File

@@ -1,25 +1,6 @@
// 编辑器样式集合
.close-editor {
.ico();
.i-ico('\e611');
position: absolute;
right: 0;
top: 0;
z-index: 100;
padding: 0 3px;
z-index: 100;
font-size: 14px;
background: #FFF;
border-left: 1px solid #000;
display: none;
&:hover {
cursor: pointer
}
}
.glyf-editor {
width: 100%;
@@ -29,30 +10,6 @@
-moz-user-select: none;
-ms-user-select: none;
.editor-contextmenu {
width: 120px;
border: 1px solid #999;
background: #FEFEFE;
line-height: 24px;
padding: 0 4px;
box-shadow: 1px 1px 1px #CCC;
div {
padding-left: 10px;
cursor: pointer;
border-bottom: 1px solid #CCC;
}
div:hover {
background: #EEE;
}
div:last-child {
border-bottom: none;
}
}
.marker-x,
.marker-y {
position: absolute;
@@ -73,8 +30,60 @@
}
}
.editor-contextmenu {
color: #333;
width: 140px;
border: 1px solid #999;
background: #FEFEFE;
line-height: 24px;
padding: 0 4px;
box-shadow: 1px 1px 1px #CCC;
position: absolute;
li {
padding-left: 10px;
cursor: pointer;
border-bottom: 1px solid #CCC;
>ul {
display: none;
color: #333;
width: 140px;
border: 1px solid #999;
background: #FEFEFE;
line-height: 24px;
padding: 0 4px;
box-shadow: 1px 1px 1px #CCC;
position: absolute;
margin-left: 120px;
}
}
>li[data-sub] {
color: green;
&:after {
content:'>';
margin-right: 10px;
float: right;
font-family: 'Simsun';
}
}
li:hover {
background: #EEE;
>ul {
display: block;
}
}
li:last-child {
border-bottom: none;
}
}
.editor:hover {
.close-editor {
display: block;
}
}

19
css/common/ico.less
View File

@@ -42,3 +42,22 @@
.ico();
.i-ico('\e600');
}
.close-editor {
.ico();
.i-ico('\e611');
position: absolute;
right: 0;
top: 0;
z-index: 100;
padding: 0 3px;
z-index: 100;
font-size: 14px;
background: #FFF;
border-left: 1px solid #000;
display: none;
&:hover {
cursor: pointer
}
}

2
demo/contoursCombine.html
View File

@@ -19,7 +19,7 @@
define('jquery', $);
</script>
<div id="render-view" class="render-view" oncontextMenu="return false"></div>
<div id="render-view" class="render-view glyf-editor" oncontextMenu="return false"></div>
<script>
require(['demo/contoursCombine']);

109
demo/css/editor.css
View File

@@ -15,6 +15,78 @@ a:hover {
.hide {
display: none;
}
.glyf-editor {
width: 100%;
height: 100%;
font-size: 12px;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.glyf-editor .marker-x,
.glyf-editor .marker-y {
position: absolute;
width: 0;
height: 0;
z-index: 60;
pointer-events: none;
}
.glyf-editor .marker-x {
width: 20px;
border-top: 1px dashed #000;
}
.glyf-editor .marker-y {
height: 20px;
border-left: 1px dashed #000;
}
.editor-contextmenu {
color: #333;
width: 140px;
border: 1px solid #999;
background: #FEFEFE;
line-height: 24px;
padding: 0 4px;
box-shadow: 1px 1px 1px #CCC;
position: absolute;
}
.editor-contextmenu li {
padding-left: 10px;
cursor: pointer;
border-bottom: 1px solid #CCC;
}
.editor-contextmenu li > ul {
display: none;
color: #333;
width: 140px;
border: 1px solid #999;
background: #FEFEFE;
line-height: 24px;
padding: 0 4px;
box-shadow: 1px 1px 1px #CCC;
position: absolute;
margin-left: 120px;
}
.editor-contextmenu > li[data-sub] {
color: green;
}
.editor-contextmenu > li[data-sub]:after {
content: '>';
margin-right: 10px;
float: right;
font-family: 'Simsun';
}
.editor-contextmenu li:hover {
background: #EEE;
}
.editor-contextmenu li:hover > ul {
display: block;
}
.editor-contextmenu li:last-child {
border-bottom: none;
}
.editor:hover .close-editor {
display: block;
}
body,
html {
height: 100%;
@@ -26,40 +98,3 @@ html {
position: relative;
-webkit-text-size-adjust: none;
}
#render-view .editor-contextmenu {
width: 120px;
border: 1px solid #999;
background: #FEFEFE;
line-height: 24px;
padding: 0 4px;
box-shadow: 1px 1px 1px #CCC;
}
#render-view .editor-contextmenu div {
padding-left: 10px;
cursor: pointer;
border-bottom: 1px solid #CCC;
}
#render-view .editor-contextmenu div:hover {
background: #EEE;
}
#render-view .editor-contextmenu div:last-child {
border-bottom: none;
}
#render-view .marker-x,
#render-view .marker-y {
position: absolute;
width: 0;
height: 0;
z-index: 60;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
#render-view .marker-x {
width: 20px;
border-top: 1px dashed #000;
}
#render-view .marker-y {
height: 20px;
border-left: 1px dashed #000;
}

44
demo/css/editor.less
View File

@@ -1,4 +1,5 @@
@import './reset';
@import '../../css/common/editor';
body, html {
height: 100%;
@@ -10,47 +11,4 @@ body, html {
height: 100%;
position: relative;
-webkit-text-size-adjust: none;
.editor-contextmenu {
width: 120px;
border: 1px solid #999;
background: #FEFEFE;
line-height: 24px;
padding: 0 4px;
box-shadow: 1px 1px 1px #CCC;
div {
padding-left: 10px;
cursor: pointer;
border-bottom: 1px solid #CCC;
}
div:hover {
background: #EEE;
}
div:last-child {
border-bottom: none;
}
}
.marker-x,
.marker-y {
position: absolute;
width: 0;
height: 0;
z-index: 60;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
.marker-x {
width: 20px;
border-top: 1px dashed #000;
}
.marker-y {
height: 20px;
border-left: 1px dashed #000;
}
}

2
demo/editor.html
View File

@@ -19,7 +19,7 @@
define('jquery', $);
</script>
<div id="render-view" class="render-view" oncontextMenu="return false"></div>
<div id="render-view" class="render-view glyf-editor" oncontextMenu="return false"></div>
<script>
require(['demo/editor']);

2
demo/editortest.html
View File

@@ -37,7 +37,7 @@
<div id="glyf-list" class="glyf-list"></div>
</div>
<div id="render-view" class="render-view" oncontextMenu="return false"></div>
<div id="render-view" class="render-view glyf-editor" oncontextMenu="return false"></div>
<script>
require(['demo/editortest']);

29
src/editor/command/support.js
View File

@@ -12,6 +12,7 @@ define(
var lang = require('common/lang');
var computeBoundingBox = require('graphics/computeBoundingBox');
var shapesSupport = require('../shapes/support');
var support = {
@@ -31,24 +32,19 @@ define(
/**
* 添加shape
* 添加path
*/
addshape: function() {
this.setMode('addshape');
addpath: function() {
this.setMode('addpath');
},
/**
* 添加rect
* 添加自选图形
*/
addrect: function() {
this.setMode('addrect');
},
/**
* 添加circle
*/
addcircle: function() {
this.setMode('addcircle');
addsupportshapes: function(type) {
if (shapesSupport[type]) {
this.setMode('addshapes', lang.clone(shapesSupport[type]));
}
},
/**
@@ -65,8 +61,11 @@ define(
/**
* 反转shape
*/
reversepoint: function(shape) {
shape.points = shape.points.reverse();
reversepoint: function(shapes) {
shapes.forEach(function(shape) {
shape.points = shape.points.reverse();
});
this.fontLayer.refresh();
},

4
src/editor/controller/initRender.js
View File

@@ -49,6 +49,10 @@ define(
this.fire('change');
}
}
else if (e.command == 'add_supportshapes') {
var type = e.args.type;
this.execCommand('addsupportshapes', type);
}
else {
this.execCommand(e.command, e);
}

183
src/editor/menu/commandList.js
View File

@@ -9,186 +9,11 @@
define(
function(require) {
// 点编辑命令
var pointCommand = {
'add': {
title: '添加点'
},
'remove': {
title: '删除点'
},
'onCurve': {
title: '在曲线上'
},
'offCurve': {
title: '远离曲线'
},
'asStart': {
title: '作为开始点'
}
};
// 路径编辑命令
var shapeCommand = {
'remove': {
title: '删除轮廓'
},
'reverse_point': {
title: '改变方向'
},
'cut': {
title: '剪切'
},
'copy': {
title: '复制'
},
'top': {
title: '置前'
},
'bottom': {
title: '置后'
},
'up': {
title: '上移一层'
},
'down': {
title: '下移一层'
},
'rotate_left': {
title: '向左旋转'
},
'rotate_right': {
title: '向右旋转'
},
'reverse_shapes': {
title: '翻转'
},
'mirror_shapes': {
title: '镜像'
},
'add_referenceline': {
title: '添加边界参考线'
}
};
var shapesCommand = {
'addshape': {
title: '添加轮廓'
},
'remove': {
title: '删除轮廓'
},
'cut': {
title: '剪切'
},
'copy': {
title: '复制'
},
'join_shapes': {
title: '结合'
},
'intersect_shapes': {
title: '相交'
},
'tangency_shapes': {
title: '相切'
},
'rotate_left': {
title: '向左旋转'
},
'rotate_right': {
title: '向右旋转'
},
'reverse_shapes': {
title: '翻转'
},
'mirror_shapes': {
title: '镜像'
},
'add_referenceline': {
title: '添加边界参考线'
}
};
var editorCommand = {
'addshape': {
title: '添加轮廓'
},
'addrect': {
title: '添加矩形'
},
'addcircle': {
title: '添加圆'
},
'undo': {
title: '撤销'
},
'redo': {
title: '恢复'
},
'paste': {
title: '粘贴'
},
'add_referenceline': {
title: '添加参考线'
},
'clearreferenceline': {
title: '清除参考线'
},
'rescale': {
title: '重置缩放'
},
'font': {
title: '字形信息'
}
};
return {
point: pointCommand,
shape: shapeCommand,
shapes: shapesCommand,
editor: editorCommand
point: require('./point'),
shape: require('./shape'),
shapes: require('./shapes'),
editor: require('./editor')
};
}
);

42
src/editor/widget/ContextMenu.js
View File

@@ -18,13 +18,13 @@ define(
* @return {HTMLElement} 浮动层对象
*/
function createPopup(container, options) {
var div = document.createElement('div');
div.className = options.className || 'editor-contextmenu';
div.style.position = 'absolute';
div.style.zIndex = options.zIndex || 1000;
div.style.display = 'none';
container.appendChild(div);
return div;
var menu = document.createElement('ul');
menu.className = options.className || 'editor-contextmenu';
menu.style.position = 'absolute';
menu.style.zIndex = options.zIndex || 1000;
menu.style.display = 'none';
container.appendChild(menu);
return menu;
}
@@ -42,11 +42,14 @@ define(
var me = this;
me.main.addEventListener('click', me['_command_click'] = function(e) {
var key = e.target.getAttribute('data-key');
if (key) {
var id = e.target.getAttribute('data-id');
var superId = e.target.getAttribute('data-super');
if (id) {
var command = (!!superId ? me.commands[superId].items : me.commands)[id];
var event = {
command: key,
commandArgs: me.commands[key],
command: command.name,
args: command,
pos: me.pos
};
me.onClick && me.onClick(event);
@@ -69,8 +72,21 @@ define(
*/
setCommands: function(commands) {
var str = '';
Object.keys(commands).forEach(function(key) {
str += '<div data-key="'+ key +'">'+ commands[key].title +'</div>';
commands.forEach(function(command, index) {
if (command.items) {
str += '<li data-sub="'+ index +'">';
str += '<ul>';
command.items.forEach(function(subCommand, subIndex) {
str += '<li data-super="'+ index +'" data-id="'+ subIndex +'">'+ subCommand.title +'</li>';
});
str += '</ul>';
str += command.title + '</li>';
}
else {
str += '<li data-id="'+ index +'">'+ command.title +'</li>';
}
});
this.commands = commands;
this.main.innerHTML = str;

12
src/fonteditor/widget/actions.js
View File

@@ -105,11 +105,13 @@ define(
// 添加新字形
'add-new': function() {
var selected = program.viewer.getSelected();
program.ttfManager.insertGlyf({
name: '',
unicode:[]
}, selected[0]);
if (program.ttfManager.get()) {
var selected = program.viewer.getSelected();
program.ttfManager.insertGlyf({
name: '',
unicode:[]
}, selected[0]);
}
},
// 添加在线字形