场景编辑区和编辑器优化。

src/Application.js

@@ -26,13 +26,15 @@ function Application(container, options) {
     this.call = this.event.call.bind(this.event);
     this.on = this.event.on.bind(this.event);
 
-    // 编辑器ui
-    this.editor = new Editor(this); // 编辑器
-
+    // 用户界面
     this.menubar = new Menubar(this); // 菜单栏
     this.menubar.render();
 
-    this.viewport = new Viewport(this); // 编辑区
+    this.viewport = new Viewport(this); // 场景编辑区
+    this.viewport.render();
+
+    this.editor = new Editor(this); // 编辑器
+
     this.sidebar = new Sidebar(this); // 侧边栏
     this.statusBar = new StatusBar(this); // 状态栏
     this.script = new Script(this); // 脚本编辑窗口
@@ -50,6 +52,7 @@ Application.prototype.start = function () {
     this.call('resize', this);
     this.call('initApp', this);
     this.call('appStarted', this);
+    this.call('animate', this);
 };
 
 Application.prototype.stop = function () {

src/editor/Editor.js

@@ -2,6 +2,7 @@
 import History from '../core/History';
 import Storage from '../core/Storage';
 import Loader from '../core/Loader';
+import RendererChangedEvent from '../event/viewport/RendererChangedEvent';
 
 /**
  * 编辑器
@@ -9,6 +10,7 @@ import Loader from '../core/Loader';
  */
 function Editor(app) {
     this.app = app;
+    this.app.editor = this;
 
     // 基础
     this.config = new Config('threejs-editor');
@@ -41,16 +43,38 @@ function Editor(app) {
     };
 
     this.renderer = this.createRendererFromConfig();
+    this.app.viewport.container.dom.appendChild(this.renderer.domElement);
+    (new RendererChangedEvent(this.app)).onRendererChanged(this.renderer);
 
     // 缓存
     this.object = {};
+    this.objects = [];
     this.geometries = {};
     this.materials = {};
     this.textures = {};
     this.scripts = {};
     this.helpers = {};
 
+    // 当前选中物体
     this.selected = null;
+
+    // 网格
+    this.grid = new THREE.GridHelper(60, 60);
+    this.sceneHelpers.add(this.grid);
+
+    // 选中包围盒
+    this.selectionBox = new THREE.BoxHelper();
+    this.selectionBox.material.depthTest = false;
+    this.selectionBox.material.transparent = true;
+    this.selectionBox.visible = false;
+    this.sceneHelpers.add(this.selectionBox);
+
+    // 平移旋转缩放控件
+    this.transformControls = new THREE.TransformControls(this.camera, this.app.viewport.container.dom);
+    this.sceneHelpers.add(this.transformControls);
+
+    // 编辑器控件
+    this.controls = new THREE.EditorControls(this.camera, this.app.viewport.container.dom);
 };
 
 // ---------------------- 渲染器 ---------------------------

src/editor/Viewport.js

@@ -1,6 +1,6 @@
-import ViewportInfo from './ViewportInfo';
-import UI from '../ui/UI';
-import RendererChangedEvent from '../event/viewport/RendererChangedEvent';
+import Control from '../ui/Control';
+import XType from '../ui/XType';
+import ViewportInfo from './ViewportInfo';
 
 /**
  * 场景编辑区
@@ -8,62 +8,24 @@ import RendererChangedEvent from '../event/viewport/RendererChangedEvent';
  */
 function Viewport(app) {
     this.app = app;
-    var editor = this.app.editor;
+    Control.call(this, { parent: this.app.container });
+};
 
-    // 用户界面
+Viewport.prototype = Object.create(Control.prototype);
+Viewport.prototype.constructor = Viewport;
 
-    var container = new UI.Div({
+Viewport.prototype.render = function () {
+    this.container = XType.create({
+        xtype: 'div',
         parent: this.app.container,
         id: 'viewport'
     });
-    this.container = container;
+    this.container.render();
 
-    container.render();
-
-    this.viewportInfo = new ViewportInfo(this.app, this.container);
-
-    this.app.viewport = this;
-
-    container.dom.appendChild(editor.renderer.domElement);
-    (new RendererChangedEvent(this.app)).onRendererChanged(editor.renderer);
-
-
-    // 相机和场景
-
-    var camera = editor.camera;
-    var scene = editor.scene;
-    var sceneHelpers = editor.sceneHelpers;
-
-    var objects = [];
-    editor.objects = objects;
-
-    // helpers
-
-    var grid = new THREE.GridHelper(60, 60);
-    sceneHelpers.add(grid);
-    editor.grid = grid;
-
-    // 选中包围盒控件
-
-    var selectionBox = new THREE.BoxHelper();
-    selectionBox.material.depthTest = false;
-    selectionBox.material.transparent = true;
-    selectionBox.visible = false;
-    sceneHelpers.add(selectionBox);
-
-    editor.selectionBox = selectionBox;
-
-    // 平移旋转缩放控件
-
-    var transformControls = new THREE.TransformControls(camera, container.dom);
-    sceneHelpers.add(transformControls);
-    editor.transformControls = transformControls;
-
-    // 编辑器控件
-    var controls = new THREE.EditorControls(camera, container.dom);
-    editor.controls = controls;
-
-    this.app.call('animate');
+    this.viewportInfo = new ViewportInfo({
+        parent: this.container.dom
+    });
+    this.viewportInfo.render();
 };
 
 export default Viewport;

src/editor/ViewportInfo.js

@@ -1,60 +1,53 @@
-import UI from '../ui/UI';
+import Control from '../ui/Control';
+import XType from '../ui/XType';
 
 /**
  * 场景信息面板
  * @author mrdoob / http://mrdoob.com/
  */
-function ViewportInfo(app, container) {
-    this.parent = container;
+function ViewportInfo(options) {
+    Control.call(this, options);
+};
 
-    this.container = new UI.Div({
-        parent: this.parent.dom,
-        cls: 'info'
-    });
+ViewportInfo.prototype = Object.create(Control.prototype);
+ViewportInfo.prototype.constructor = ViewportInfo;
 
-    // 物体数
-    this.objectsLabel = new UI.Label({
-        text: '物体'
-    });
+ViewportInfo.prototype.render = function () {
+    var data = {
+        xtype: 'div',
+        parent: this.parent,
+        cls: 'info',
+        children: [{
+            xtype: 'label',
+            text: '物体'
+        }, {
+            xtype: 'text',
+            id: 'objectsText',
+            text: '0' // 物体数
+        }, {
+            xtype: 'br'
+        }, {
+            xtype: 'label',
+            text: '顶点'
+        }, {
+            xtype: 'text',
+            id: 'verticesText',
+            text: '0' // 顶点数
+        }, {
+            xtype: 'br'
+        }, {
+            xtype: 'label',
+            text: '三角形'
+        }, {
+            xtype: 'text',
+            id: 'trianglesText',
+            text: '0' // 三角形数
+        }]
+    };
 
-    this.objectsText = new UI.Text({
-        id: 'objectsText',
-        text: '0'
-    });
-
-    this.container.add(this.objectsLabel);
-    this.container.add(this.objectsText);
-    this.container.add(new UI.Break());
-
-    // 顶点数
-    this.verticesLabel = new UI.Label({
-        text: '顶点'
-    });
-
-    this.verticesText = new UI.Text({
-        id: 'verticesText',
-        text: '0'
-    });
-
-    this.container.add(this.verticesLabel);
-    this.container.add(this.verticesText);
-    this.container.add(new UI.Break());
-
-    // 三角形数
-    this.trianglesLabel = new UI.Label({
-        text: '三角形'
-    });
-
-    this.trianglesText = new UI.Text({
-        id: 'trianglesText',
-        text: '0'
-    });
-
-    this.container.add(this.trianglesLabel);
-    this.container.add(this.trianglesText);
-    this.container.add(new UI.Break());
-
-    this.container.render();
+    var control = XType.create(data);
+    control.parent = this.parent;
+    control.render();
 };
 
 export default ViewportInfo;

src/editor/menubar/StatusMenu.js

@@ -26,7 +26,7 @@ StatusMenu.prototype.render = function () {
             id: 'bAutoSave',
             xtype: 'boolean',
             text: '自动保存',
-            value: this.app.editor.config.getKey('autosave'),
+            value: true,
             style: 'color: #888 !important;',
             onChange: function (e) {
                 _this.app.editor.config.setKey('autosave', e.target.checked);

src/event/menu/status/SavingStatusEvent.js

@@ -12,15 +12,21 @@ SavingStatusEvent.prototype = Object.create(MenuEvent.prototype);
 SavingStatusEvent.prototype.constructor = SavingStatusEvent;
 
 SavingStatusEvent.prototype.start = function () {
+    this.app.on('initApp.' + this.id, this.onInitApp.bind(this));
     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('initApp.' + this.id, null);
     this.app.on('savingStarted.' + this.id, null);
     this.app.on('savingFinished.' + this.id, null);
 };
 
+SavingStatusEvent.prototype.onInitApp = function () {
+    document.querySelector('#bAutoSave > input').checked = this.app.editor.config.getKey('autosave');
+};
+
 SavingStatusEvent.prototype.onSavingStarted = function () {
     document.querySelector('#bAutoSave > span').style.textDecoration = 'underline';
 };