mirror of
https://github.com/tengge1/ShadowEditor.git
synced 2026-02-01 16:08:17 +00:00
菜单栏终极优化。
This commit is contained in:
liteng
parent
0bbf60c477
commit
d3f57003c9
@ -28,7 +28,10 @@ function Application(container, options) {
|
||||
|
||||
// 编辑器ui
|
||||
this.editor = new Editor(this); // 编辑器
|
||||
|
||||
this.menubar = new Menubar(this); // 菜单栏
|
||||
this.menubar.render();
|
||||
|
||||
this.viewport = new Viewport(this); // 编辑区
|
||||
this.sidebar = new Sidebar(this); // 侧边栏
|
||||
this.statusBar = new StatusBar(this); // 状态栏
|
||||
|
||||
@ -1,4 +1,15 @@
|
||||
import UI from '../ui/UI';
|
||||
import Control from '../ui/Control';
|
||||
import Div from '../ui/Div';
|
||||
|
||||
import SceneMenu from './menubar/SceneMenu';
|
||||
import EditMenu from './menubar/EditMenu';
|
||||
import AddMenu from './menubar/AddMenu';
|
||||
import AssetMenu from './menubar/AssetMenu';
|
||||
import PlayMenu from './menubar/PlayMenu';
|
||||
import ViewMenu from './menubar/ViewMenu';
|
||||
import ExampleMenu from './menubar/ExampleMenu';
|
||||
import HelpMenu from './menubar/HelpMenu';
|
||||
import StatusMenu from './menubar/StatusMenu';
|
||||
|
||||
/**
|
||||
* 菜单栏
|
||||
@ -7,385 +18,35 @@
|
||||
function Menubar(app) {
|
||||
this.app = app;
|
||||
|
||||
// ---------------- 菜单数据 ----------------------
|
||||
Control.call(this, { parent: this.app.container });
|
||||
|
||||
this.data = [{
|
||||
text: '场景',
|
||||
children: [{
|
||||
id: 'mNewScene',
|
||||
text: '新建',
|
||||
onClick: function () {
|
||||
app.call('mNewScene');
|
||||
}
|
||||
}, {
|
||||
id: 'mLoadScene',
|
||||
text: '载入',
|
||||
onClick: function () {
|
||||
app.call('mLoadScene');
|
||||
}
|
||||
}, {
|
||||
id: 'mSaveScene',
|
||||
text: '保存',
|
||||
onClick: function () {
|
||||
app.call('mSaveScene');
|
||||
}
|
||||
}, {
|
||||
text: '-'
|
||||
}, {
|
||||
id: 'mPublishScene',
|
||||
text: '发布',
|
||||
onClick: function () {
|
||||
app.call('mPublishScene');
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
text: '编辑',
|
||||
children: [{
|
||||
id: 'mUndo',
|
||||
text: '撤销(Ctrl+Z)',
|
||||
onClick: function () {
|
||||
app.call('mUndo');
|
||||
}
|
||||
}, {
|
||||
id: 'mRedo',
|
||||
text: '重做(Ctrl+Shift+Z)',
|
||||
onClick: function () {
|
||||
app.call('mRedo');
|
||||
}
|
||||
}, {
|
||||
id: 'mClearHistory',
|
||||
text: '清空历史记录',
|
||||
onClick: function () {
|
||||
app.call('mClearHistory');
|
||||
}
|
||||
}, {
|
||||
text: '-'
|
||||
}, {
|
||||
id: 'mClone',
|
||||
text: '复制',
|
||||
onClick: function () {
|
||||
app.call('mClone');
|
||||
}
|
||||
}, {
|
||||
id: 'mDelete',
|
||||
text: '删除(Del)',
|
||||
onClick: function () {
|
||||
app.call('mDelete');
|
||||
}
|
||||
}, {
|
||||
id: 'mMinifyShader',
|
||||
text: '压缩着色器程序',
|
||||
onClick: function () {
|
||||
app.call('mMinifyShader');
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
text: '添加',
|
||||
children: [{
|
||||
id: 'mAddGroup',
|
||||
text: '组',
|
||||
onClick: function () {
|
||||
app.call('mAddGroup');
|
||||
}
|
||||
}, {
|
||||
text: '-'
|
||||
}, {
|
||||
id: 'mAddPlane',
|
||||
text: '平板',
|
||||
onClick: function () {
|
||||
app.call('mAddPlane');
|
||||
}
|
||||
}, {
|
||||
id: 'mAddBox',
|
||||
text: '正方体',
|
||||
onClick: function () {
|
||||
app.call('mAddBox');
|
||||
}
|
||||
}, {
|
||||
id: 'mAddCircle',
|
||||
text: '圆',
|
||||
onClick: function () {
|
||||
app.call('mAddCircle');
|
||||
}
|
||||
}, {
|
||||
id: 'mAddCylinder',
|
||||
text: '圆柱体',
|
||||
onClick: function () {
|
||||
app.call('mAddCylinder');
|
||||
}
|
||||
}, {
|
||||
id: 'mAddSphere',
|
||||
text: '球体',
|
||||
onClick: function () {
|
||||
app.call('mAddSphere');
|
||||
}
|
||||
}, {
|
||||
id: 'mAddIcosahedron',
|
||||
text: '二十面体',
|
||||
onClick: function () {
|
||||
app.call('mAddIcosahedron');
|
||||
}
|
||||
}, {
|
||||
id: 'mAddTorus',
|
||||
text: '轮胎',
|
||||
onClick: function () {
|
||||
app.call('mAddTorus');
|
||||
}
|
||||
}, {
|
||||
id: 'mAddTorusKnot',
|
||||
text: '扭结',
|
||||
onClick: function () {
|
||||
app.call('mAddTorusKnot');
|
||||
}
|
||||
}, {
|
||||
id: 'mAddTeaport',
|
||||
text: '茶壶',
|
||||
onClick: function () {
|
||||
app.call('mAddTeaport');
|
||||
}
|
||||
}, {
|
||||
id: 'mAddLathe',
|
||||
text: '花瓶',
|
||||
onClick: function () {
|
||||
app.call('mAddLathe');
|
||||
}
|
||||
}, {
|
||||
id: 'mAddSprite',
|
||||
text: '精灵',
|
||||
onClick: function () {
|
||||
app.call('mAddSprite');
|
||||
}
|
||||
}, {
|
||||
text: '-'
|
||||
}, {
|
||||
id: 'mAddPointLight',
|
||||
text: '点光源',
|
||||
onClick: function () {
|
||||
app.call('mAddPointLight');
|
||||
}
|
||||
}, {
|
||||
id: 'mAddSpotLight',
|
||||
text: '聚光灯',
|
||||
onClick: function () {
|
||||
app.call('mAddSpotLight');
|
||||
}
|
||||
}, {
|
||||
id: 'mAddDirectionalLight',
|
||||
text: '平行光源',
|
||||
onClick: function () {
|
||||
app.call('mAddDirectionalLight');
|
||||
}
|
||||
}, {
|
||||
id: 'mAddHemisphereLight',
|
||||
text: '半球光',
|
||||
onClick: function () {
|
||||
app.call('mAddHemisphereLight');
|
||||
}
|
||||
}, {
|
||||
id: 'mAddAmbientLight',
|
||||
text: '环境光',
|
||||
onClick: function () {
|
||||
app.call('mAddAmbientLight');
|
||||
}
|
||||
}, {
|
||||
text: '-'
|
||||
}, {
|
||||
id: 'mAddPerspectiveCamera',
|
||||
text: '透视相机',
|
||||
onClick: function () {
|
||||
app.call('mAddPerspectiveCamera');
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
text: '资源',
|
||||
children: [{
|
||||
id: 'mImportAsset',
|
||||
text: '导入',
|
||||
onClick: function () {
|
||||
app.call('mImportAsset');
|
||||
}
|
||||
}, {
|
||||
text: '-'
|
||||
}, {
|
||||
id: 'mExportGeometry',
|
||||
text: '导出Geometry',
|
||||
onClick: function () {
|
||||
app.call('mExportGeometry');
|
||||
}
|
||||
}, {
|
||||
id: 'mExportObject',
|
||||
text: '导出Object',
|
||||
onClick: function () {
|
||||
app.call('mExportObject');
|
||||
}
|
||||
}, {
|
||||
id: 'mExportScene',
|
||||
text: '导出场景',
|
||||
onClick: function () {
|
||||
app.call('mExportScene');
|
||||
}
|
||||
}, {
|
||||
id: 'mExportOBJ',
|
||||
text: '导出OBJ',
|
||||
onClick: function () {
|
||||
app.call('mExportOBJ');
|
||||
}
|
||||
}, {
|
||||
id: 'mExportSTL',
|
||||
text: '导出STL',
|
||||
onClick: function () {
|
||||
app.call('mExportSTL');
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
id: 'mPlay',
|
||||
text: '启动',
|
||||
onClick: function () {
|
||||
app.call('mPlay');
|
||||
}
|
||||
}, {
|
||||
text: '视图',
|
||||
children: [{
|
||||
id: 'mVRMode',
|
||||
text: 'VR模式',
|
||||
onClick: function () {
|
||||
app.call('mVRMode');
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
text: '示例',
|
||||
children: [{
|
||||
id: 'mArkanoid',
|
||||
text: '打砖块',
|
||||
onClick: function () {
|
||||
app.call('mArkanoid');
|
||||
}
|
||||
}, {
|
||||
id: 'mCamera',
|
||||
text: '相机',
|
||||
onClick: function () {
|
||||
app.call('mCamera');
|
||||
}
|
||||
}, {
|
||||
id: 'mParticles',
|
||||
text: '粒子',
|
||||
onClick: function () {
|
||||
app.call('mParticles');
|
||||
}
|
||||
}, {
|
||||
id: 'mPong',
|
||||
text: '乒乓球',
|
||||
onClick: function () {
|
||||
app.call('mPong');
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
text: '帮助',
|
||||
children: [{
|
||||
id: 'mSourceCode',
|
||||
text: '源码',
|
||||
onClick: function () {
|
||||
app.call('mSourceCode');
|
||||
}
|
||||
}, {
|
||||
id: 'mAbout',
|
||||
text: '关于',
|
||||
onClick: function () {
|
||||
app.call('mAbout');
|
||||
}
|
||||
}]
|
||||
}];
|
||||
this.children = [
|
||||
// 左侧
|
||||
new SceneMenu({ app: this.app }),
|
||||
new EditMenu({ app: this.app }),
|
||||
new AddMenu({ app: this.app }),
|
||||
new AssetMenu({ app: this.app }),
|
||||
new PlayMenu({ app: this.app }),
|
||||
new ViewMenu({ app: this.app }),
|
||||
new ExampleMenu({ app: this.app }),
|
||||
new HelpMenu({ app: this.app }),
|
||||
|
||||
// --------------- 渲染生成dom ----------------------
|
||||
// 右侧
|
||||
new StatusMenu({ app: this.app })
|
||||
];
|
||||
};
|
||||
|
||||
this.dom = new UI.Div({
|
||||
parent: this.app.container,
|
||||
id: 'menubar'
|
||||
Menubar.prototype = Object.create(Control.prototype);
|
||||
Menubar.prototype.constructor = Menubar;
|
||||
|
||||
Menubar.prototype.render = function () {
|
||||
this.dom = new Div({
|
||||
parent: this.parent,
|
||||
id: 'menubar',
|
||||
children: this.children
|
||||
});
|
||||
|
||||
var _this = this;
|
||||
this.data.forEach(function (n) {
|
||||
var menu = new UI.Div({
|
||||
cls: 'menu'
|
||||
});
|
||||
|
||||
// 菜单标题
|
||||
var title = new UI.Div({
|
||||
id: n.id,
|
||||
cls: 'title',
|
||||
html: n.text
|
||||
});
|
||||
menu.add(title);
|
||||
|
||||
if (n.children) {
|
||||
// 下拉菜单
|
||||
var options = new UI.Div({
|
||||
cls: 'options'
|
||||
});
|
||||
menu.add(options);
|
||||
|
||||
n.children.forEach(function (m) {
|
||||
if (m.text === '-') { // 分隔符
|
||||
var hr = new UI.HorizontalRule();
|
||||
options.add(hr);
|
||||
} else { // 其他文字
|
||||
var option = new UI.Div({
|
||||
id: m.id,
|
||||
cls: 'option',
|
||||
html: m.text
|
||||
});
|
||||
options.add(option);
|
||||
|
||||
// 菜单子项click事件
|
||||
if (typeof (m.onClick) === 'function') {
|
||||
option.onClick = m.onClick; // this是具体菜单对应的Div
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// 主菜单click事件
|
||||
if (typeof (n.onClick) === 'function') {
|
||||
menu.onClick = n.onClick; // this是具体菜单对应的Div
|
||||
}
|
||||
|
||||
_this.dom.add(menu);
|
||||
});
|
||||
|
||||
// 状态菜单
|
||||
var statusMenu = new UI.Div({
|
||||
id: 'mStatus',
|
||||
cls: 'menu right'
|
||||
});
|
||||
|
||||
var autosave = new UI.Boolean({
|
||||
text: '自动保存',
|
||||
value: this.app.editor.config.getKey('autosave'),
|
||||
style: 'color: #888 !important;',
|
||||
onChange: function (e) {
|
||||
_this.app.editor.config.setKey('autosave', e.target.checked);
|
||||
_this.app.call('sceneGraphChanged', _this);
|
||||
}
|
||||
});
|
||||
statusMenu.add(autosave);
|
||||
|
||||
var version = new UI.Text({
|
||||
text: 'r' + THREE.REVISION,
|
||||
cls: 'title version'
|
||||
});
|
||||
statusMenu.add(version);
|
||||
|
||||
this.dom.add(statusMenu);
|
||||
|
||||
this.dom.render();
|
||||
|
||||
this.app.on('savingStarted.StatusMenu', function () {
|
||||
autosave.span.style.textDecoration = 'underline';
|
||||
});
|
||||
|
||||
this.app.on('savingFinished.StatusMenu', function () {
|
||||
autosave.span.style.textDecoration = 'none';
|
||||
});
|
||||
};
|
||||
|
||||
export default Menubar;
|
||||
@ -31,7 +31,7 @@ AddMenu.prototype.render = function () {
|
||||
children: [{
|
||||
xtype: 'div',
|
||||
id: 'mAddGroup',
|
||||
text: '组',
|
||||
html: '组',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mAddGroup');
|
||||
@ -41,7 +41,7 @@ AddMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mAddPlane',
|
||||
text: '平板',
|
||||
html: '平板',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mAddPlane');
|
||||
@ -49,15 +49,15 @@ AddMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mAddBox',
|
||||
text: '正方体',
|
||||
cls: 'options',
|
||||
html: '正方体',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mAddBox');
|
||||
}
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mAddCircle',
|
||||
text: '圆',
|
||||
html: '圆',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mAddCircle');
|
||||
@ -65,7 +65,7 @@ AddMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mAddCylinder',
|
||||
text: '圆柱体',
|
||||
html: '圆柱体',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mAddCylinder');
|
||||
@ -73,7 +73,7 @@ AddMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mAddSphere',
|
||||
text: '球体',
|
||||
html: '球体',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mAddSphere');
|
||||
@ -81,7 +81,7 @@ AddMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mAddIcosahedron',
|
||||
text: '二十面体',
|
||||
html: '二十面体',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mAddIcosahedron');
|
||||
@ -89,7 +89,7 @@ AddMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mAddTorus',
|
||||
text: '轮胎',
|
||||
html: '轮胎',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mAddTorus');
|
||||
@ -97,7 +97,7 @@ AddMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mAddTorusKnot',
|
||||
text: '扭结',
|
||||
html: '扭结',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mAddTorusKnot');
|
||||
@ -105,7 +105,7 @@ AddMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mAddTeaport',
|
||||
text: '茶壶',
|
||||
html: '茶壶',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mAddTeaport');
|
||||
@ -113,7 +113,7 @@ AddMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mAddLathe',
|
||||
text: '花瓶',
|
||||
html: '花瓶',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mAddLathe');
|
||||
@ -121,7 +121,7 @@ AddMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mAddSprite',
|
||||
text: '精灵',
|
||||
html: '精灵',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mAddSprite');
|
||||
@ -131,7 +131,7 @@ AddMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mAddPointLight',
|
||||
text: '点光源',
|
||||
html: '点光源',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mAddPointLight');
|
||||
@ -139,7 +139,7 @@ AddMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mAddSpotLight',
|
||||
text: '聚光灯',
|
||||
html: '聚光灯',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mAddSpotLight');
|
||||
@ -147,7 +147,7 @@ AddMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mAddDirectionalLight',
|
||||
text: '平行光源',
|
||||
html: '平行光源',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mAddDirectionalLight');
|
||||
@ -155,7 +155,7 @@ AddMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mAddHemisphereLight',
|
||||
text: '半球光',
|
||||
html: '半球光',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mAddHemisphereLight');
|
||||
@ -163,7 +163,7 @@ AddMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mAddAmbientLight',
|
||||
text: '环境光',
|
||||
html: '环境光',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mAddAmbientLight');
|
||||
@ -173,7 +173,7 @@ AddMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mAddPerspectiveCamera',
|
||||
text: '透视相机',
|
||||
html: '透视相机',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mAddPerspectiveCamera');
|
||||
@ -182,8 +182,9 @@ AddMenu.prototype.render = function () {
|
||||
}]
|
||||
};
|
||||
|
||||
this.dom = XType.create(data);
|
||||
this.parent.appendChild(this.dom);
|
||||
var control = XType.create(data);
|
||||
control.parent = this.parent;
|
||||
control.render();
|
||||
}
|
||||
|
||||
export default AddMenu;
|
||||
@ -31,15 +31,17 @@ AssetMenu.prototype.render = function () {
|
||||
children: [{
|
||||
xtype: 'div',
|
||||
id: 'mImportAsset',
|
||||
text: '导入',
|
||||
html: '导入',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mImportAsset');
|
||||
}
|
||||
}, {
|
||||
xtype: 'hr'
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mExportGeometry',
|
||||
text: '导出Geometry',
|
||||
html: '导出Geometry',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mExportGeometry');
|
||||
@ -47,15 +49,15 @@ AssetMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mExportObject',
|
||||
text: '导出Object',
|
||||
cls: 'options',
|
||||
html: '导出Object',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mExportObject');
|
||||
}
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mExportScene',
|
||||
text: '导出场景',
|
||||
html: '导出场景',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mExportScene');
|
||||
@ -63,7 +65,7 @@ AssetMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mExportOBJ',
|
||||
text: '导出OBJ',
|
||||
html: '导出OBJ',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mExportOBJ');
|
||||
@ -71,7 +73,7 @@ AssetMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mExportSTL',
|
||||
text: '导出STL',
|
||||
html: '导出STL',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mExportSTL');
|
||||
@ -80,8 +82,9 @@ AssetMenu.prototype.render = function () {
|
||||
}]
|
||||
};
|
||||
|
||||
this.dom = XType.create(data);
|
||||
this.parent.appendChild(this.dom);
|
||||
var control = XType.create(data);
|
||||
control.parent = this.parent;
|
||||
control.render();
|
||||
}
|
||||
|
||||
export default AssetMenu;
|
||||
@ -31,7 +31,7 @@ EditMenu.prototype.render = function () {
|
||||
children: [{
|
||||
xtype: 'div',
|
||||
id: 'mUndo',
|
||||
text: '撤销(Ctrl+Z)',
|
||||
html: '撤销(Ctrl+Z)',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mUndo');
|
||||
@ -39,7 +39,7 @@ EditMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mRedo',
|
||||
text: '重做(Ctrl+Shift+Z)',
|
||||
html: '重做(Ctrl+Shift+Z)',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mRedo');
|
||||
@ -47,8 +47,8 @@ EditMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mClearHistory',
|
||||
text: '清空历史记录',
|
||||
cls: 'options',
|
||||
html: '清空历史记录',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mClearHistory');
|
||||
}
|
||||
@ -57,7 +57,7 @@ EditMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mClone',
|
||||
text: '复制',
|
||||
html: '复制',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mClone');
|
||||
@ -65,7 +65,7 @@ EditMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mDelete',
|
||||
text: '删除(Del)',
|
||||
html: '删除(Del)',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mDelete');
|
||||
@ -73,7 +73,7 @@ EditMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mMinifyShader',
|
||||
text: '压缩着色器程序',
|
||||
html: '压缩着色器程序',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mMinifyShader');
|
||||
@ -82,8 +82,9 @@ EditMenu.prototype.render = function () {
|
||||
}]
|
||||
};
|
||||
|
||||
this.dom = XType.create(data);
|
||||
this.parent.appendChild(this.dom);
|
||||
var control = XType.create(data);
|
||||
control.parent = this.parent;
|
||||
control.render();
|
||||
}
|
||||
|
||||
export default EditMenu;
|
||||
72
src/editor/menubar/ExampleMenu.js
Normal file
72
src/editor/menubar/ExampleMenu.js
Normal file
@ -0,0 +1,72 @@
|
||||
import Control from '../../ui/Control';
|
||||
import XType from '../../ui/XType';
|
||||
|
||||
/**
|
||||
* 示例菜单
|
||||
* @param {*} options
|
||||
*/
|
||||
function ExampleMenu(options) {
|
||||
Control.call(this, options);
|
||||
options = options || {};
|
||||
|
||||
this.app = options.app;
|
||||
}
|
||||
|
||||
ExampleMenu.prototype = Object.create(Control.prototype);
|
||||
ExampleMenu.prototype.constructor = ExampleMenu;
|
||||
|
||||
ExampleMenu.prototype.render = function () {
|
||||
var _this = this;
|
||||
|
||||
var data = {
|
||||
xtype: 'div',
|
||||
cls: 'menu',
|
||||
children: [{
|
||||
xtype: 'div',
|
||||
cls: 'title',
|
||||
html: '示例'
|
||||
}, {
|
||||
xtype: 'div',
|
||||
cls: 'options',
|
||||
children: [{
|
||||
id: 'mArkanoid',
|
||||
xtype: 'div',
|
||||
cls: 'option',
|
||||
html: '打砖块',
|
||||
onClick: function () {
|
||||
_this.app.call('mArkanoid');
|
||||
}
|
||||
}, {
|
||||
id: 'mCamera',
|
||||
xtype: 'div',
|
||||
cls: 'option',
|
||||
html: '相机',
|
||||
onClick: function () {
|
||||
_this.app.call('mCamera');
|
||||
}
|
||||
}, {
|
||||
id: 'mParticles',
|
||||
xtype: 'div',
|
||||
cls: 'option',
|
||||
html: '粒子',
|
||||
onClick: function () {
|
||||
_this.app.call('mParticles');
|
||||
}
|
||||
}, {
|
||||
id: 'mPong',
|
||||
xtype: 'div',
|
||||
cls: 'option',
|
||||
html: '乒乓球',
|
||||
onClick: function () {
|
||||
_this.app.call('mPong');
|
||||
}
|
||||
}]
|
||||
}]
|
||||
};
|
||||
|
||||
var control = XType.create(data);
|
||||
control.parent = this.parent;
|
||||
control.render();
|
||||
}
|
||||
|
||||
export default ExampleMenu;
|
||||
56
src/editor/menubar/HelpMenu.js
Normal file
56
src/editor/menubar/HelpMenu.js
Normal file
@ -0,0 +1,56 @@
|
||||
import Control from '../../ui/Control';
|
||||
import XType from '../../ui/XType';
|
||||
|
||||
/**
|
||||
* 帮助菜单
|
||||
* @param {*} options
|
||||
*/
|
||||
function HelpMenu(options) {
|
||||
Control.call(this, options);
|
||||
options = options || {};
|
||||
|
||||
this.app = options.app;
|
||||
}
|
||||
|
||||
HelpMenu.prototype = Object.create(Control.prototype);
|
||||
HelpMenu.prototype.constructor = HelpMenu;
|
||||
|
||||
HelpMenu.prototype.render = function () {
|
||||
var _this = this;
|
||||
|
||||
var data = {
|
||||
xtype: 'div',
|
||||
cls: 'menu',
|
||||
children: [{
|
||||
xtype: 'div',
|
||||
cls: 'title',
|
||||
html: '帮助'
|
||||
}, {
|
||||
xtype: 'div',
|
||||
cls: 'options',
|
||||
children: [{
|
||||
id: 'mSourceCode',
|
||||
xtype: 'div',
|
||||
cls: 'option',
|
||||
html: '源码',
|
||||
onClick: function () {
|
||||
_this.app.call('mSourceCode');
|
||||
}
|
||||
}, {
|
||||
id: 'mAbout',
|
||||
xtype: 'div',
|
||||
cls: 'option',
|
||||
html: '关于',
|
||||
onClick: function () {
|
||||
_this.app.call('mAbout');
|
||||
}
|
||||
}]
|
||||
}]
|
||||
};
|
||||
|
||||
var control = XType.create(data);
|
||||
control.parent = this.parent;
|
||||
control.render();
|
||||
}
|
||||
|
||||
export default HelpMenu;
|
||||
@ -32,8 +32,9 @@ PlayMenu.prototype.render = function () {
|
||||
}]
|
||||
};
|
||||
|
||||
this.dom = XType.create(data);
|
||||
this.parent.appendChild(this.dom);
|
||||
var control = XType.create(data);
|
||||
control.parent = this.parent;
|
||||
control.render();
|
||||
}
|
||||
|
||||
export default PlayMenu;
|
||||
@ -31,7 +31,7 @@ SceneMenu.prototype.render = function () {
|
||||
children: [{
|
||||
xtype: 'div',
|
||||
id: 'mNewScene',
|
||||
text: '新建',
|
||||
html: '新建',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mNewScene');
|
||||
@ -39,7 +39,7 @@ SceneMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mLoadScene',
|
||||
text: '载入',
|
||||
html: '载入',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mLoadScene');
|
||||
@ -47,8 +47,8 @@ SceneMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mSaveScene',
|
||||
text: '保存',
|
||||
cls: 'options',
|
||||
html: '保存',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mSaveScene');
|
||||
}
|
||||
@ -57,7 +57,7 @@ SceneMenu.prototype.render = function () {
|
||||
}, {
|
||||
xtype: 'div',
|
||||
id: 'mPublishScene',
|
||||
text: '发布',
|
||||
html: '发布',
|
||||
cls: 'option',
|
||||
onClick: function () {
|
||||
_this.app.call('mPublishScene');
|
||||
@ -66,8 +66,9 @@ SceneMenu.prototype.render = function () {
|
||||
}]
|
||||
};
|
||||
|
||||
this.dom = XType.create(data);
|
||||
this.parent.appendChild(this.dom);
|
||||
var control = XType.create(data);
|
||||
control.parent = this.parent;
|
||||
control.render();
|
||||
}
|
||||
|
||||
export default SceneMenu;
|
||||
47
src/editor/menubar/StatusMenu.js
Normal file
47
src/editor/menubar/StatusMenu.js
Normal file
@ -0,0 +1,47 @@
|
||||
import Control from '../../ui/Control';
|
||||
import XType from '../../ui/XType';
|
||||
|
||||
/**
|
||||
* 状态菜单（菜单栏右侧）
|
||||
* @param {*} options
|
||||
*/
|
||||
function StatusMenu(options) {
|
||||
Control.call(this, options);
|
||||
options = options || {};
|
||||
|
||||
this.app = options.app;
|
||||
}
|
||||
|
||||
StatusMenu.prototype = Object.create(Control.prototype);
|
||||
StatusMenu.prototype.constructor = StatusMenu;
|
||||
|
||||
StatusMenu.prototype.render = function () {
|
||||
var _this = this;
|
||||
|
||||
var data = {
|
||||
xtype: 'div',
|
||||
id: 'mStatus',
|
||||
cls: 'menu right',
|
||||
children: [{
|
||||
id: 'bAutoSave',
|
||||
xtype: 'boolean',
|
||||
text: '自动保存',
|
||||
value: this.app.editor.config.getKey('autosave'),
|
||||
style: 'color: #888 !important;',
|
||||
onChange: function (e) {
|
||||
_this.app.editor.config.setKey('autosave', e.target.checked);
|
||||
_this.app.call('sceneGraphChanged', _this);
|
||||
}
|
||||
}, {
|
||||
xtype: 'text',
|
||||
text: 'r' + THREE.REVISION,
|
||||
cls: 'title version'
|
||||
}]
|
||||
};
|
||||
|
||||
var control = XType.create(data);
|
||||
control.parent = this.parent;
|
||||
control.render();
|
||||
}
|
||||
|
||||
export default StatusMenu;
|
||||
48
src/editor/menubar/ViewMenu.js
Normal file
48
src/editor/menubar/ViewMenu.js
Normal file
@ -0,0 +1,48 @@
|
||||
import Control from '../../ui/Control';
|
||||
import XType from '../../ui/XType';
|
||||
|
||||
/**
|
||||
* 视图菜单
|
||||
* @param {*} options
|
||||
*/
|
||||
function ViewMenu(options) {
|
||||
Control.call(this, options);
|
||||
options = options || {};
|
||||
|
||||
this.app = options.app;
|
||||
}
|
||||
|
||||
ViewMenu.prototype = Object.create(Control.prototype);
|
||||
ViewMenu.prototype.constructor = ViewMenu;
|
||||
|
||||
ViewMenu.prototype.render = function () {
|
||||
var _this = this;
|
||||
|
||||
var data = {
|
||||
xtype: 'div',
|
||||
cls: 'menu',
|
||||
children: [{
|
||||
xtype: 'div',
|
||||
cls: 'title',
|
||||
html: '视图'
|
||||
}, {
|
||||
xtype: 'div',
|
||||
cls: 'options',
|
||||
children: [{
|
||||
id: 'mVRMode',
|
||||
xtype: 'div',
|
||||
cls: 'option',
|
||||
html: 'VR模式',
|
||||
onClick: function () {
|
||||
_this.app.call('mVRMode');
|
||||
}
|
||||
}]
|
||||
}]
|
||||
};
|
||||
|
||||
var control = XType.create(data);
|
||||
control.parent = this.parent;
|
||||
control.render();
|
||||
}
|
||||
|
||||
export default ViewMenu;
|
||||
@ -80,6 +80,8 @@ import ExampleEvent from './menu/example/ExampleEvent';
|
||||
import SourceCodeEvent from './menu/help/SourceCodeEvent';
|
||||
import AboutEvent from './menu/help/AboutEvent';
|
||||
|
||||
import SavingStatusEvent from './menu/status/SavingStatusEvent';
|
||||
|
||||
import TransformControlsEvent from './viewport/TransformControlsEvent';
|
||||
import UpdateViewportInfoEvent from './viewport/UpdateViewportInfoEvent';
|
||||
import RenderEvent from './viewport/RenderEvent';
|
||||
@ -192,6 +194,8 @@ function EventDispatcher(app) {
|
||||
new SourceCodeEvent(this.app),
|
||||
new AboutEvent(this.app),
|
||||
|
||||
new SavingStatusEvent(this.app),
|
||||
|
||||
// viewport中的事件
|
||||
new TransformControlsEvent(this.app),
|
||||
new UpdateViewportInfoEvent(this.app),
|
||||
|
||||
32
src/event/menu/status/SavingStatusEvent.js
Normal file
32
src/event/menu/status/SavingStatusEvent.js
Normal file
@ -0,0 +1,32 @@
|
||||
import MenuEvent from '../MenuEvent';
|
||||
|
||||
/**
|
||||
* 保存状态改变
|
||||
* @param {*} app
|
||||
*/
|
||||
function SavingStatusEvent(app) {
|
||||
MenuEvent.call(this, app);
|
||||
}
|
||||
|
||||
SavingStatusEvent.prototype = Object.create(MenuEvent.prototype);
|
||||
SavingStatusEvent.prototype.constructor = SavingStatusEvent;
|
||||
|
||||
SavingStatusEvent.prototype.start = function () {
|
||||
this.app.on('savingStarted.' + this.id, this.onSavingStarted.bind(this));
|
||||
this.app.on('savingFinished.' + this.id, this.onSavingFinished.bind(this));
|
||||
};
|
||||
|
||||
SavingStatusEvent.prototype.stop = function () {
|
||||
this.app.on('savingStarted.' + this.id, null);
|
||||
this.app.on('savingFinished.' + this.id, null);
|
||||
};
|
||||
|
||||
SavingStatusEvent.prototype.onSavingStarted = function () {
|
||||
document.querySelector('#bAutoSave > span').style.textDecoration = 'underline';
|
||||
};
|
||||
|
||||
SavingStatusEvent.prototype.onSavingFinished = function () {
|
||||
document.querySelector('#bAutoSave > span').style.textDecoration = 'none';
|
||||
};
|
||||
|
||||
export default SavingStatusEvent;
|
||||
Loading…
x
Reference in New Issue
Block a user