add viewer spliter
This commit is contained in:
kekee000
parent
26fb3aa742
commit
4e971a343d
@ -21,6 +21,12 @@ git clone https://github.com/kekee000/fonteditor-core
|
||||
node ./build/build-index.js
|
||||
```
|
||||
|
||||
* `less`文件修改之后使用如下脚本编译：
|
||||
|
||||
```
|
||||
node ./build/build-css.js
|
||||
```
|
||||
|
||||
* 使用`edp`对fonteditor进行调试
|
||||
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
@ -5,6 +5,7 @@
|
||||
@import './widget/loading.less';
|
||||
@import './widget/project.less';
|
||||
@import './widget/glyf-list.less';
|
||||
@import './widget/glyf-spliter.less';
|
||||
@import './widget/editor.less';
|
||||
@import './widget/glyf-editor.less';
|
||||
@import './widget/dialog.less';
|
||||
|
||||
5
css/widget/glyf-spliter.less
Normal file
5
css/widget/glyf-spliter.less
Normal file
@ -0,0 +1,5 @@
|
||||
.main .spliter {
|
||||
position: absolute;
|
||||
height: 80%;
|
||||
width: 6px;
|
||||
}
|
||||
@ -18,8 +18,8 @@
|
||||
background: url(../img/logo.png) no-repeat;
|
||||
background-color: #fff;
|
||||
background-position: center;
|
||||
background-image: url(../img/logo@1x.png);
|
||||
background-image: -webkit-image-set(url(../img/logo@1x.png) 1x, url(../img/logo@2x.png) 2x);
|
||||
background-image: url(./img/logo@1x.png);
|
||||
background-image: -webkit-image-set(url(../img/logo@1x.png) 1x, url(./img/logo@2x.png) 2x);
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
||||
@ -10,8 +10,7 @@
|
||||
}
|
||||
|
||||
.btn:last-child {
|
||||
float: right;
|
||||
margin-right: 0;
|
||||
margin-left: 10px;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
@ -109,6 +109,7 @@
|
||||
</section>
|
||||
|
||||
<section class="main">
|
||||
<div id="glyf-list-spliter" class="spliter"></div>
|
||||
<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>
|
||||
|
||||
@ -56,6 +56,7 @@ define(
|
||||
* @param {number} glyfIndex 字形索引
|
||||
*/
|
||||
function showEditor(glyfIndex) {
|
||||
var isEditorVisible = program.editor.isVisible();
|
||||
|
||||
// 重置editor缩放
|
||||
var ttf = program.ttfManager.get();
|
||||
@ -65,7 +66,11 @@ define(
|
||||
|
||||
program.viewer.setMode('editor');
|
||||
|
||||
program.editor.show();
|
||||
if (!isEditorVisible) {
|
||||
program.editor.show();
|
||||
program.spliter.enable();
|
||||
program.fire('editor-show');
|
||||
}
|
||||
|
||||
// 调整显示级别
|
||||
program.editor.setAxis(getEditingOpt(ttf));
|
||||
@ -101,6 +106,8 @@ define(
|
||||
$('.editor').removeClass('editing');
|
||||
|
||||
program.editor && program.editor.hide();
|
||||
program.spliter.disable();
|
||||
program.fire('editor-hide');
|
||||
program.viewer.clearEditing();
|
||||
program.viewer.setMode('list');
|
||||
program.viewer.focus();
|
||||
@ -462,6 +469,34 @@ define(
|
||||
});
|
||||
}
|
||||
|
||||
function bindSpliter(program) {
|
||||
var adjustEditor = function () {
|
||||
var width = $('.editor').css('width');
|
||||
if (width) {
|
||||
$('.main').css('margin-left', width);
|
||||
}
|
||||
};
|
||||
|
||||
program
|
||||
.on('editor-show', function () {
|
||||
// 为了防止多次绑定导致bug，这里先释放一下
|
||||
program.editor.editor.render.resizeCapture.un('resize', adjustEditor);
|
||||
program.editor.editor.render.resizeCapture.on('resize', adjustEditor);
|
||||
adjustEditor();
|
||||
})
|
||||
.on('editor-hide', function () {
|
||||
program.editor.editor.render.resizeCapture.un('resize', adjustEditor);
|
||||
$('.main').css('margin-left', '');
|
||||
});
|
||||
|
||||
program.spliter.disable()
|
||||
.on('change', function (e) {
|
||||
var editor = $('.editor');
|
||||
editor.width(editor.width() + e.delta);
|
||||
program.editor.editor.render.resizeCapture.fire('resize', e);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 绑定项目列表
|
||||
*
|
||||
@ -640,11 +675,11 @@ define(
|
||||
program = curProgram;
|
||||
|
||||
bindViewer(program);
|
||||
bindSpliter(program);
|
||||
bindttfManager(program);
|
||||
bindProject(program);
|
||||
bindProgram(program);
|
||||
|
||||
|
||||
$('.close-editor').click(function () {
|
||||
hideEditor();
|
||||
});
|
||||
|
||||
@ -9,6 +9,7 @@ define(
|
||||
var GLYFViewer = require('./widget/glyfviewer/GLYFViewer');
|
||||
var GLYFEditor = require('./widget/GLYFEditor');
|
||||
var ProjectViewer = require('./widget/ProjectViewer');
|
||||
var Spliter = require('./widget/Spliter');
|
||||
var TTFManager = require('./widget/TTFManager');
|
||||
var Toolbar = require('./widget/Toolbar');
|
||||
var Pager = require('./widget/Pager');
|
||||
@ -87,6 +88,8 @@ define(
|
||||
|
||||
program.config = require('./config');
|
||||
|
||||
program.spliter = new Spliter($('#glyf-list-spliter'));
|
||||
|
||||
// glyf查看器命令组
|
||||
var viewerCommandMenu = new Toolbar($('#glyf-list-commandmenu'), {
|
||||
commands: require('./menu/viewer')
|
||||
|
||||
81
src/fonteditor/widget/Spliter.js
Normal file
81
src/fonteditor/widget/Spliter.js
Normal file
@ -0,0 +1,81 @@
|
||||
/**
|
||||
* @file 面板分割管理器
|
||||
* @author mengke01(kekee000@gmail.com)
|
||||
*/
|
||||
|
||||
define(function (require) {
|
||||
var lang = require('common/lang');
|
||||
|
||||
function init(spliter) {
|
||||
spliter.onMouseDown = function (e) {
|
||||
spliter.deltaX = spliter.x = e.pageX;
|
||||
spliter.cover.appendTo(document.body);
|
||||
$(window).on('mousemove', onMouseMove)
|
||||
.on('mouseup', onMouseUp);
|
||||
};
|
||||
|
||||
var fireChange = lang.throttle(function (e) {
|
||||
var offset = e.pageX - spliter.x;
|
||||
var deltaX = e.pageX - spliter.deltaX;
|
||||
spliter.deltaX = e.pageX;
|
||||
if (deltaX) {
|
||||
spliter.fire('change', {
|
||||
offset: offset,
|
||||
delta: deltaX
|
||||
});
|
||||
}
|
||||
}, 200);
|
||||
var onMouseMove = function (e) {
|
||||
fireChange(e);
|
||||
};
|
||||
|
||||
var onMouseUp = function (e) {
|
||||
spliter.cover.remove();
|
||||
fireChange(e);
|
||||
$(window).off('mousemove', onMouseMove)
|
||||
.off('mouseup', onMouseUp);
|
||||
};
|
||||
|
||||
spliter.enable();
|
||||
}
|
||||
|
||||
/**
|
||||
* 面板分割管理器
|
||||
*
|
||||
* @constructor
|
||||
* @param {HTMLElement} main 主元素
|
||||
* @param {Object} options 参数
|
||||
*/
|
||||
function Spliter(main) {
|
||||
this.main = $(main);
|
||||
var cover = '<div style="'
|
||||
+ 'position:fixed;z-index: 100;width: 100%;height: 100%;left:0;top:0;cursor:e-resize"></div>';
|
||||
this.cover = $(cover);
|
||||
init(this);
|
||||
}
|
||||
|
||||
Spliter.prototype.enable = function () {
|
||||
if (!this.isEnabled) {
|
||||
this.isEnabled = true;
|
||||
this.main.css('cursor', 'e-resize').on('mousedown', this.onMouseDown);
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
Spliter.prototype.disable = function () {
|
||||
if (this.isEnabled) {
|
||||
delete this.isEnabled;
|
||||
this.main.css('cursor', '').off('mousedown', this.onMouseDown);
|
||||
}
|
||||
return this;
|
||||
};
|
||||
|
||||
Spliter.prototype.dispose = function () {
|
||||
this.disable();
|
||||
this.cover.remove();
|
||||
this.main = this.cover = null;
|
||||
};
|
||||
|
||||
require('common/observable').mixin(Spliter.prototype);
|
||||
return Spliter;
|
||||
});
|
||||
@ -84,12 +84,10 @@ define(
|
||||
me.painter.resetSize();
|
||||
var size = me.painter.getSize();
|
||||
|
||||
if (size.width !== prevSize.width || size.height !== prevSize.height) {
|
||||
me.fire('resize', {
|
||||
size: size,
|
||||
prevSize: prevSize
|
||||
});
|
||||
}
|
||||
me.fire('resize', {
|
||||
size: size,
|
||||
prevSize: prevSize
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user