diff --git a/src/Application.js b/src/Application.js index bf932f28..5d0f5529 100644 --- a/src/Application.js +++ b/src/Application.js @@ -42,7 +42,6 @@ function Application(container, options) { // 脚本编辑窗口 this.script = new Script(this); - this.container.appendChild(this.script.dom); // 启动窗口 this.player = new Player(this); diff --git a/src/core/Config.js b/src/core/Config.js index 61949078..1340afad 100644 --- a/src/core/Config.js +++ b/src/core/Config.js @@ -3,7 +3,6 @@ * @author mrdoob / http://mrdoob.com/ */ function Config(name) { - var storage = { 'autosave': true, 'theme': 'assets/css/light.css', @@ -19,51 +18,34 @@ function Config(name) { }; if (window.localStorage[name] === undefined) { - window.localStorage[name] = JSON.stringify(storage); - } else { - var data = JSON.parse(window.localStorage[name]); for (var key in data) { - storage[key] = data[key]; - } - } return { - getKey: function (key) { - return storage[key]; - }, setKey: function () { // key, value, key, value ... - for (var i = 0, l = arguments.length; i < l; i += 2) { - storage[arguments[i]] = arguments[i + 1]; - } window.localStorage[name] = JSON.stringify(storage); console.log('[' + /\d\d\:\d\d\:\d\d/.exec(new Date())[0] + ']', '保存配置到LocalStorage。'); - }, clear: function () { - delete window.localStorage[name]; - } - }; - }; export default Config; \ No newline at end of file diff --git a/src/core/History.js b/src/core/History.js index 0b272e99..87aef61a 100644 --- a/src/core/History.js +++ b/src/core/History.js @@ -1,10 +1,10 @@ import Command from '../command/Command'; /** + * 历史记录 * @author dforrer / https://github.com/dforrer * Developed as part of a project at University of Applied Sciences and Arts Northwestern Switzerland (www.fhnw.ch) */ - function History(editor) { this.app = editor.app; @@ -90,121 +90,85 @@ Object.assign(History.prototype, { }, undo: function () { - if (this.historyDisabled) { - alert("场景启动时撤销/重做将被禁用。"); return; - } var cmd = undefined; if (this.undos.length > 0) { - cmd = this.undos.pop(); if (cmd.inMemory === false) { - cmd.fromJSON(cmd.json); - } - } if (cmd !== undefined) { - cmd.undo(); this.redos.push(cmd); this.app.call('historyChanged', this, cmd); - } return cmd; - }, redo: function () { - if (this.historyDisabled) { - alert("场景启动时撤销/重做将被禁用。"); return; - } var cmd = undefined; if (this.redos.length > 0) { - cmd = this.redos.pop(); if (cmd.inMemory === false) { - cmd.fromJSON(cmd.json); - } - } if (cmd !== undefined) { - cmd.execute(); this.undos.push(cmd); this.app.call('historyChanged', this, cmd); - } return cmd; - }, toJSON: function () { - var history = {}; history.undos = []; history.redos = []; if (!this.config.getKey('settings/history')) { - return history; - } // Append Undos to History - for (var i = 0; i < this.undos.length; i++) { - if (this.undos[i].hasOwnProperty("json")) { - history.undos.push(this.undos[i].json); - } - } // Append Redos to History - for (var i = 0; i < this.redos.length; i++) { - if (this.redos[i].hasOwnProperty("json")) { - history.redos.push(this.redos[i].json); - } - } return history; - }, fromJSON: function (json) { - if (json === undefined) return; for (var i = 0; i < json.undos.length; i++) { - var cmdJSON = json.undos[i]; var cmd = new window[cmdJSON.type](); // creates a new object of type "json.type" cmd.json = cmdJSON; @@ -212,11 +176,9 @@ Object.assign(History.prototype, { cmd.name = cmdJSON.name; this.undos.push(cmd); this.idCounter = (cmdJSON.id > this.idCounter) ? cmdJSON.id : this.idCounter; // set last used idCounter - } for (var i = 0; i < json.redos.length; i++) { - var cmdJSON = json.redos[i]; var cmd = new window[cmdJSON.type](); // creates a new object of type "json.type" cmd.json = cmdJSON; @@ -224,61 +186,43 @@ Object.assign(History.prototype, { cmd.name = cmdJSON.name; this.redos.push(cmd); this.idCounter = (cmdJSON.id > this.idCounter) ? cmdJSON.id : this.idCounter; // set last used idCounter - } // Select the last executed undo-command this.app.call('historyChanged', this, this.undos[this.undos.length - 1]); - }, clear: function () { - this.undos = []; this.redos = []; this.idCounter = 0; this.app.call('historyChanged', this); - }, goToState: function (id) { - if (this.historyDisabled) { - alert("场景启动时撤销/重做将被禁用。"); return; - } var cmd = this.undos.length > 0 ? this.undos[this.undos.length - 1] : undefined; // next cmd to pop if (cmd === undefined || id > cmd.id) { - cmd = this.redo(); while (cmd !== undefined && id > cmd.id) { - cmd = this.redo(); - } - } else { - while (true) { - cmd = this.undos[this.undos.length - 1]; // next cmd to pop - if (cmd === undefined || id === cmd.id) break; - cmd = this.undo(); - } - } this.editor.app.call('sceneGraphChanged', this); this.editor.app.call('historyChanged', this, cmd); - }, enableSerialization: function (id) { @@ -294,14 +238,10 @@ Object.assign(History.prototype, { var cmd = this.redo(); while (cmd !== undefined) { - if (!cmd.hasOwnProperty("json")) { - cmd.json = cmd.toJSON(); - } cmd = this.redo(); - } this.goToState(id); diff --git a/src/core/Loader.js b/src/core/Loader.js index b4570bb2..1194da8c 100644 --- a/src/core/Loader.js +++ b/src/core/Loader.js @@ -2,9 +2,9 @@ import SetSceneCommand from '../command/SetSceneCommand'; /** + * 模型加载 * @author mrdoob / http://mrdoob.com/ */ - function Loader(editor) { var scope = this; diff --git a/src/core/Player.js b/src/core/Player.js index cd97e89e..7ce6f41c 100644 --- a/src/core/Player.js +++ b/src/core/Player.js @@ -1,9 +1,9 @@ import UI from '../ui/UI'; /** + * 播放器 * @author mrdoob / http://mrdoob.com/ */ - function Player(app) { this.app = app; var editor = this.app.editor; diff --git a/src/core/Script.js b/src/core/Script.js index 75535544..12a3fdf3 100644 --- a/src/core/Script.js +++ b/src/core/Script.js @@ -1,4 +1,4 @@ -import UI from '../ui/UI'; +import UI2 from '../ui2/UI'; import SetScriptValueCommand from '../command/SetScriptValueCommand'; /** @@ -9,43 +9,34 @@ function Script(app) { this.app = app; var editor = this.app.editor; - var container = new UI.Panel(); - container.setId('script'); - container.setPosition('absolute'); - container.setBackgroundColor('#272822'); - container.setDisplay('none'); + // 渲染ui + var container = new UI2.Div({ + parent: this.app.container, + id: 'script', + style: 'position: absolute; background-color: #272822; display: none;' + }); - var header = new UI.Panel(); - header.setPadding('10px'); + var header = new UI2.Div({ + style: 'padding: 10px;' + }); container.add(header); - var title = new UI.Text().setColor('#fff'); + var title = new UI2.Text({ + style: 'color: #fff;' + }); header.add(title); - var buttonSVG = (function () { - var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); - svg.setAttribute('width', 32); - svg.setAttribute('height', 32); - var path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); - path.setAttribute('d', 'M 12,12 L 22,22 M 22,12 12,22'); - path.setAttribute('stroke', '#fff'); - svg.appendChild(path); - return svg; - })(); - - var close = new UI.Element(buttonSVG); - close.setPosition('absolute'); - close.setTop('3px'); - close.setRight('1px'); - close.setCursor('pointer'); - close.onClick(function () { - - container.setDisplay('none'); - + var close = new UI2.CloseButton({ + style: 'position: absolute; top: 3px; right: 1px; cursor: pointer', + onClick: function () { + container.dom.style.display = 'none'; + } }); header.add(close); + container.render(); + // 业务逻辑 var renderer; this.app.on('rendererChanged.Script', function (newRenderer) { @@ -349,7 +340,7 @@ function Script(app) { // this.app.on('editorCleared.Script', function () { - container.setDisplay('none'); + container.dom.style.display = 'none'; }); this.app.on('editScript.Script', function (object, script) { @@ -402,7 +393,7 @@ function Script(app) { currentScript = script; currentObject = object; - container.setDisplay(''); + container.dom.style.display = 'block'; codemirror.setValue(source); if (mode === 'json') mode = { name: 'javascript', json: true }; codemirror.setOption('mode', mode); @@ -410,7 +401,7 @@ function Script(app) { this.app.on('scriptRemoved.Script', function (script) { if (currentScript === script) { - container.setDisplay('none'); + container.dom.style.display = 'none'; } }); @@ -431,9 +422,6 @@ function Script(app) { } codemirror.setHistory(history); // setting the history to previous state }); - - return container; - }; export default Script; \ No newline at end of file diff --git a/src/core/Storage.js b/src/core/Storage.js index 8b66aa55..2ac922b7 100644 --- a/src/core/Storage.js +++ b/src/core/Storage.js @@ -1,16 +1,13 @@ /** + * 本地存储 * @author mrdoob / http://mrdoob.com/ */ - function Storage() { - var indexedDB = window.indexedDB || window.mozIndexedDB || window.webkitIndexedDB || window.msIndexedDB; if (indexedDB === undefined) { - console.warn('Storage: IndexedDB不可用。'); return { init: function () { }, get: function () { }, set: function () { }, clear: function () { } }; - } var name = 'threejs-editor'; @@ -19,12 +16,9 @@ function Storage() { var database; return { - init: function (callback) { - var request = indexedDB.open(name, version); request.onupgradeneeded = function (event) { - var db = event.target.result; if (db.objectStoreNames.contains('states') === false) { @@ -32,69 +26,50 @@ function Storage() { db.createObjectStore('states'); } - }; request.onsuccess = function (event) { - database = event.target.result; callback(); - }; request.onerror = function (event) { - console.error('IndexedDB', event); - }; - - }, get: function (callback) { - var transaction = database.transaction(['states'], 'readwrite'); var objectStore = transaction.objectStore('states'); var request = objectStore.get(0); request.onsuccess = function (event) { - callback(event.target.result); - }; }, set: function (data, callback) { - var start = performance.now(); var transaction = database.transaction(['states'], 'readwrite'); var objectStore = transaction.objectStore('states'); var request = objectStore.put(data, 0); request.onsuccess = function (event) { - console.log('[' + /\d\d\:\d\d\:\d\d/.exec(new Date())[0] + ']', '保存到IndexedDB中。 ' + (performance.now() - start).toFixed(2) + 'ms'); - }; }, clear: function () { - if (database === undefined) return; var transaction = database.transaction(['states'], 'readwrite'); var objectStore = transaction.objectStore('states'); var request = objectStore.clear(); request.onsuccess = function (event) { - console.log('[' + /\d\d\:\d\d\:\d\d/.exec(new Date())[0] + ']', '清空IndexedDB。'); - }; - } - }; - }; export default Storage; \ No newline at end of file diff --git a/src/ui2/CloseButton.js b/src/ui2/CloseButton.js new file mode 100644 index 00000000..993f14ce --- /dev/null +++ b/src/ui2/CloseButton.js @@ -0,0 +1,40 @@ +import Control from './Control'; + +/** + * 关闭按钮 + * @param {*} options + */ +function CloseButton(options) { + Control.call(this, options); + options = options || {}; + this.style = options.style || null; + this.onClick = options.onClick || null; +} + +CloseButton.prototype = Object.create(Control.prototype); +CloseButton.prototype.constructor = CloseButton; + +CloseButton.prototype.render = function () { + this.dom = document.createElementNS('http://www.w3.org/2000/svg', 'svg'); + this.dom.setAttribute('width', 32); + this.dom.setAttribute('height', 32); + + if (this.style) { + this.dom.style = this.style; + } + + this.parent.appendChild(this.dom); + + if (this.onClick) { + this.dom.addEventListener('click', this.onClick.bind(this)); + } + + this.path = document.createElementNS('http://www.w3.org/2000/svg', 'path'); + this.path.setAttribute('d', 'M 12,12 L 22,22 M 22,12 12,22'); + this.path.setAttribute('stroke', '#fff'); + + this.dom.appendChild(this.path); +}; + +export default CloseButton; + diff --git a/src/ui2/UI.js b/src/ui2/UI.js index 8be83c9a..c89531af 100644 --- a/src/ui2/UI.js +++ b/src/ui2/UI.js @@ -17,6 +17,7 @@ import Modal from './Modal'; import Texture from './Texture'; import Outliner from './Outliner'; import Boolean from './Boolean'; +import CloseButton from './CloseButton'; /** * 所有UI控件封装 @@ -39,6 +40,7 @@ const UI = { HorizontalRule: HorizontalRule, Button: Button, Modal: Modal, + CloseButton: CloseButton, // ui.three.js Texture: Texture,