archive-gh-me/ShadowEditor
1
0
Fork 0
mirror of https://github.com/tengge1/ShadowEditor.git synced 2026-02-01 16:08:17 +00:00
Code Issues Projects Releases Wiki Activity

脚本窗口ui优化。

Browse Source
This commit is contained in:
liteng 2018-06-24 14:25:58 +08:00
parent bf85e6bf4f
commit dc544fd38e
9 changed files with 69 additions and 143 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/Application.js
View File

@ -42,7 +42,6 @@ function Application(container, options) {
// 脚本编辑窗口
this.script = new Script(this);
this.container.appendChild(this.script.dom);
// 启动窗口
this.player = new Player(this);

18
src/core/Config.js
View File

@ -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;

62
src/core/History.js
View File

@ -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);

2
src/core/Loader.js
View File

@ -2,9 +2,9 @@
import SetSceneCommand from '../command/SetSceneCommand';
/**
* 模型加载
* @author mrdoob / http://mrdoob.com/
*/
function Loader(editor) {
var scope = this;

2
src/core/Player.js
View File

@ -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;

58
src/core/Script.js
View File

@ -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;

27
src/core/Storage.js
View File

@ -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;

40
src/ui2/CloseButton.js Normal file
View File

@ -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;

2
src/ui2/UI.js
View File

@ -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,