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

Revert "将ui.js和ui.three.js中的代码放到项目内，以便修改。"

Browse Source 
This reverts commit fa0cc2813117244bfc0baf2dacfc2492633c92b2.
This commit is contained in:
liteng 2018-06-13 20:14:15 +08:00
parent fa0cc28131
commit 79db8b94c0
38 changed files with 116 additions and 1722 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
index.html
View File

@ -80,6 +80,8 @@
<script src="third_party/tern-threejs/threejs.js"></script>
<script src="third_party/signals.min.js"></script>
<script src="third_party/ui.js"></script>
<script src="third_party/ui.three.js"></script>
<script src="third_party/app.js"></script>

3
src/Application.js
View File

@ -5,7 +5,6 @@ import Player from './core/Player';
import Toolbar from './ui/Toolbar';
import Menubar from './menu/Menubar';
import Panel from './panel/Panel';
import Modal from './ui/Modal';
/**
* Application
@ -35,7 +34,7 @@ function Application(container) {
var sidebar = new Panel(editor);
container.appendChild(sidebar.dom);
var modal = new Modal();
var modal = new UI.Modal();
container.appendChild(modal.dom);
// init

0
src/Text.js
View File

4
src/core/Player.js
View File

@ -1,5 +1,3 @@
import Panel from '../ui/Panel';
/**
* @author mrdoob / http://mrdoob.com/
*/
@ -8,7 +6,7 @@ function Player(editor) {
var signals = editor.signals;
var container = new Panel();
var container = new UI.Panel();
container.setId('player');
container.setPosition('absolute');
container.setDisplay('none');

11
src/core/Script.js
View File

@ -1,6 +1,3 @@
import Panel from '../ui/Panel';
import Text from '../ui/Text';
import Element from '../ui/Element';
import SetScriptValueCommand from '../command/SetScriptValueCommand';
/**
@ -11,17 +8,17 @@ function Script(editor) {
var signals = editor.signals;
var container = new Panel();
var container = new UI.Panel();
container.setId('script');
container.setPosition('absolute');
container.setBackgroundColor('#272822');
container.setDisplay('none');
var header = new Panel();
var header = new UI.Panel();
header.setPadding('10px');
container.add(header);
var title = new Text().setColor('#fff');
var title = new UI.Text().setColor('#fff');
header.add(title);
var buttonSVG = (function () {
@ -35,7 +32,7 @@ function Script(editor) {
return svg;
})();
var close = new Element(buttonSVG);
var close = new UI.Element(buttonSVG);
close.setPosition('absolute');
close.setTop('3px');
close.setRight('1px');

53
src/menu/AddMenu.js
View File

@ -1,7 +1,4 @@
import Panel from '../ui/Panel';
import Row from '../ui/Row';
import HorizontalRule from '../ui/HorizontalRule';
import AddObjectCommand from '../command/AddObjectCommand';
import AddObjectCommand from '../command/AddObjectCommand';
/**
* @author mrdoob / http://mrdoob.com/
@ -9,15 +6,15 @@ import AddObjectCommand from '../command/AddObjectCommand';
function AddMenu(editor) {
var container = new Panel();
var container = new UI.Panel();
container.setClass('menu');
var title = new Panel();
var title = new UI.Panel();
title.setClass('title');
title.setTextContent('添加');
container.add(title);
var options = new Panel();
var options = new UI.Panel();
options.setClass('options');
container.add(options);
@ -37,7 +34,7 @@ function AddMenu(editor) {
// Group
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('组');
option.onClick(function () {
@ -52,11 +49,11 @@ function AddMenu(editor) {
//
options.add(new HorizontalRule());
options.add(new UI.HorizontalRule());
// Plane
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('平板');
option.onClick(function () {
@ -73,7 +70,7 @@ function AddMenu(editor) {
// Box
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('正方体');
option.onClick(function () {
@ -89,7 +86,7 @@ function AddMenu(editor) {
// Circle
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('圆');
option.onClick(function () {
@ -108,7 +105,7 @@ function AddMenu(editor) {
// Cylinder
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('圆柱体');
option.onClick(function () {
@ -131,7 +128,7 @@ function AddMenu(editor) {
// Sphere
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('球体');
option.onClick(function () {
@ -155,7 +152,7 @@ function AddMenu(editor) {
// Icosahedron
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('二十面体');
option.onClick(function () {
@ -174,7 +171,7 @@ function AddMenu(editor) {
// Torus
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('圆环面');
option.onClick(function () {
@ -196,7 +193,7 @@ function AddMenu(editor) {
// TorusKnot
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('环面扭结');
option.onClick(function () {
@ -219,7 +216,7 @@ function AddMenu(editor) {
/*// Teapot
var option = new Row();
var option = new UI.Row();
option.setClass( 'option' );
option.setTextContent( '茶壶' );
option.onClick( function () {
@ -246,7 +243,7 @@ function AddMenu(editor) {
// Lathe
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('花瓶');
option.onClick(function () {
@ -279,7 +276,7 @@ function AddMenu(editor) {
// Sprite
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('精灵');
option.onClick(function () {
@ -294,11 +291,11 @@ function AddMenu(editor) {
//
options.add(new HorizontalRule());
options.add(new UI.HorizontalRule());
// PointLight
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('点光源');
option.onClick(function () {
@ -317,7 +314,7 @@ function AddMenu(editor) {
// SpotLight
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('聚光灯');
option.onClick(function () {
@ -341,7 +338,7 @@ function AddMenu(editor) {
// DirectionalLight
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('平行光源');
option.onClick(function () {
@ -362,7 +359,7 @@ function AddMenu(editor) {
// HemisphereLight
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('半球光');
option.onClick(function () {
@ -383,7 +380,7 @@ function AddMenu(editor) {
// AmbientLight
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('环境光');
option.onClick(function () {
@ -400,11 +397,11 @@ function AddMenu(editor) {
//
options.add(new HorizontalRule());
options.add(new UI.HorizontalRule());
// PerspectiveCamera
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('透视相机');
option.onClick(function () {

24
src/menu/AssetMenu.js
View File

@ -1,7 +1,3 @@
import Panel from '../ui/Panel';
import Row from '../ui/Row';
import HorizontalRule from '../ui/HorizontalRule';
function AssetMenu(editor) {
var NUMBER_PRECISION = 6;
@ -14,15 +10,15 @@ function AssetMenu(editor) {
//
var container = new Panel();
var container = new UI.Panel();
container.setClass('menu');
var title = new Panel();
var title = new UI.Panel();
title.setClass('title');
title.setTextContent('资源');
container.add(title);
var options = new Panel();
var options = new UI.Panel();
options.setClass('options');
container.add(options);
@ -36,7 +32,7 @@ function AssetMenu(editor) {
});
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('导入');
option.onClick(function () {
@ -48,11 +44,11 @@ function AssetMenu(editor) {
//
options.add(new HorizontalRule());
options.add(new UI.HorizontalRule());
// Export Geometry
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('导出Geometry');
option.onClick(function () {
@ -95,7 +91,7 @@ function AssetMenu(editor) {
// Export Object
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('导出Object');
option.onClick(function () {
@ -129,7 +125,7 @@ function AssetMenu(editor) {
// Export Scene
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('导出场景');
option.onClick(function () {
@ -154,7 +150,7 @@ function AssetMenu(editor) {
// Export OBJ
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('导出OBJ');
option.onClick(function () {
@ -177,7 +173,7 @@ function AssetMenu(editor) {
// Export STL
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('导出STL');
option.onClick(function () {

25
src/menu/EditMenu.js
View File

@ -1,7 +1,4 @@
import Panel from '../ui/Panel';
import Row from '../ui/Row';
import HorizontalRule from '../ui/HorizontalRule';
import AddObjectCommand from '../command/AddObjectCommand';
import AddObjectCommand from '../command/AddObjectCommand';
import RemoveObjectCommand from '../command/RemoveObjectCommand';
import SetMaterialValueCommand from '../command/SetMaterialValueCommand';
import MultiCmdsCommand from '../command/MultiCmdsCommand';
@ -12,21 +9,21 @@ import MultiCmdsCommand from '../command/MultiCmdsCommand';
function EditMenu(editor) {
var container = new Panel();
var container = new UI.Panel();
container.setClass('menu');
var title = new Panel();
var title = new UI.Panel();
title.setClass('title');
title.setTextContent('编辑');
container.add(title);
var options = new Panel();
var options = new UI.Panel();
options.setClass('options');
container.add(options);
// Undo
var undo = new Row();
var undo = new UI.Row();
undo.setClass('option');
undo.setTextContent('撤销(Ctrl+Z)');
undo.onClick(function () {
@ -38,7 +35,7 @@ function EditMenu(editor) {
// Redo
var redo = new Row();
var redo = new UI.Row();
redo.setClass('option');
redo.setTextContent('重做(Ctrl+Shift+Z)');
redo.onClick(function () {
@ -50,7 +47,7 @@ function EditMenu(editor) {
// Clear History
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('清空历史记录');
option.onClick(function () {
@ -88,11 +85,11 @@ function EditMenu(editor) {
// ---
options.add(new HorizontalRule());
options.add(new UI.HorizontalRule());
// Clone
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('复制');
option.onClick(function () {
@ -110,7 +107,7 @@ function EditMenu(editor) {
// Delete
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('删除(Del)');
option.onClick(function () {
@ -129,7 +126,7 @@ function EditMenu(editor) {
// Minify shaders
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('清除着色');
option.onClick(function () {

14
src/menu/ExampleMenu.js
View File

@ -1,22 +1,18 @@
import Panel from '../ui/Panel';
import Row from '../ui/Row';
import HorizontalRule from '../ui/HorizontalRule';
/**
/**
* @author mrdoob / http://mrdoob.com/
*/
function ExampleMenu(editor) {
var container = new Panel();
var container = new UI.Panel();
container.setClass('menu');
var title = new Panel();
var title = new UI.Panel();
title.setClass('title');
title.setTextContent('示例');
container.add(title);
var options = new Panel();
var options = new UI.Panel();
options.setClass('options');
container.add(options);
@ -37,7 +33,7 @@ function ExampleMenu(editor) {
var item = items[i];
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent(item.title);
option.onClick(function () {

22
src/menu/FileMenu.js
View File

@ -1,28 +1,24 @@
import Panel from '../ui/Panel';
import Row from '../ui/Row';
import HorizontalRule from '../ui/HorizontalRule';
/**
/**
* @author mrdoob / http://mrdoob.com/
*/
function FileMenu(editor) {
var container = new Panel();
var container = new UI.Panel();
container.setClass('menu');
var title = new Panel();
var title = new UI.Panel();
title.setClass('title');
title.setTextContent('文件');
container.add(title);
var options = new Panel();
var options = new UI.Panel();
options.setClass('options');
container.add(options);
// 新建
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('新建');
option.onClick(function () {
@ -38,7 +34,7 @@ function FileMenu(editor) {
// 载入
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('载入');
option.onClick(function () {
@ -54,7 +50,7 @@ function FileMenu(editor) {
// 保存
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('保存');
option.onClick(function () {
@ -66,11 +62,11 @@ function FileMenu(editor) {
// ---
options.add(new HorizontalRule());
options.add(new UI.HorizontalRule());
// 发布
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('发布');
option.onClick(function () {

16
src/menu/HelpMenu.js
View File

@ -1,28 +1,24 @@
import Panel from '../ui/Panel';
import Row from '../ui/Row';
import HorizontalRule from '../ui/HorizontalRule';
/**
/**
* @author mrdoob / http://mrdoob.com/
*/
function HelpMenu(editor) {
var container = new Panel();
var container = new UI.Panel();
container.setClass('menu');
var title = new Panel();
var title = new UI.Panel();
title.setClass('title');
title.setTextContent('帮助');
container.add(title);
var options = new Panel();
var options = new UI.Panel();
options.setClass('options');
container.add(options);
// Source code
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('源码');
option.onClick(function () {
@ -34,7 +30,7 @@ function HelpMenu(editor) {
// About
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('关于');
option.onClick(function () {

5
src/menu/Menubar.js
View File

@ -1,5 +1,4 @@
import Panel from '../ui/Panel';
import FileMenu from './FileMenu';
import FileMenu from './FileMenu';
import EditMenu from './EditMenu';
import AddMenu from './AddMenu';
import AssetMenu from './AssetMenu';
@ -15,7 +14,7 @@ import ViewMenu from './ViewMenu';
function Menubar(editor) {
var container = new Panel();
var container = new UI.Panel();
container.setId('menubar');
container.add(new FileMenu(editor));

10
src/menu/PlayMenu.js
View File

@ -1,8 +1,4 @@
import Panel from '../ui/Panel';
import Row from '../ui/Row';
import HorizontalRule from '../ui/HorizontalRule';
/**
/**
* @author mrdoob / http://mrdoob.com/
*/
@ -10,12 +6,12 @@ function PlayMenu(editor) {
var signals = editor.signals;
var container = new Panel();
var container = new UI.Panel();
container.setClass('menu');
var isPlaying = false;
var title = new Panel();
var title = new UI.Panel();
title.setClass('title');
title.setTextContent('启动');
title.onClick(function () {

14
src/menu/StatusMenu.js
View File

@ -1,19 +1,13 @@
import Panel from '../ui/Panel';
import Row from '../ui/Row';
import HorizontalRule from '../ui/HorizontalRule';
import Text from '../ui/Text';
import Boolean from '../ui/Boolean';
/**
/**
* @author mrdoob / http://mrdoob.com/
*/
function StatusMenu(editor) {
var container = new Panel();
var container = new UI.Panel();
container.setClass('menu right');
var autosave = new Boolean(editor.config.getKey('autosave'), '自动保存');
var autosave = new UI.THREE.Boolean(editor.config.getKey('autosave'), '自动保存');
autosave.text.setColor('#888');
autosave.onChange(function () {
@ -42,7 +36,7 @@ function StatusMenu(editor) {
});
var version = new Text('r' + THREE.REVISION);
var version = new UI.Text('r' + THREE.REVISION);
version.setClass('title');
version.setOpacity(0.5);
container.add(version);

16
src/menu/ViewMenu.js
View File

@ -1,30 +1,24 @@
import Panel from '../ui/Panel';
import Row from '../ui/Row';
import HorizontalRule from '../ui/HorizontalRule';
import Text from '../ui/Text';
import Boolean from '../ui/Boolean';
/**
/**
* @author mrdoob / http://mrdoob.com/
*/
function ViewMenu(editor) {
var container = new Panel();
var container = new UI.Panel();
container.setClass('menu');
var title = new Panel();
var title = new UI.Panel();
title.setClass('title');
title.setTextContent('视图');
container.add(title);
var options = new Panel();
var options = new UI.Panel();
options.setClass('options');
container.add(options);
// VR mode
var option = new Row();
var option = new UI.Row();
option.setClass('option');
option.setTextContent('VR模式');
option.onClick(function () {

24
src/panel/AnimationPanel.js
View File

@ -1,12 +1,4 @@
import Panel from '../ui/Panel';
import Row from '../ui/Row';
import HorizontalRule from '../ui/HorizontalRule';
import Text from '../ui/Text';
import Boolean from '../ui/Boolean';
import Break from '../ui/Break';
import Button from '../ui/Button';
/**
/**
* @author mrdoob / http://mrdoob.com/
*/
@ -17,14 +9,14 @@ function AnimationPanel(editor) {
var options = {};
var possibleAnimations = {};
var container = new Panel();
var container = new UI.Panel();
container.setDisplay('none');
container.add(new Text('动画'));
container.add(new Break());
container.add(new Break());
container.add(new UI.Text('动画'));
container.add(new UI.Break());
container.add(new UI.Break());
var animationsRow = new Row();
var animationsRow = new UI.Row();
container.add(animationsRow);
/*
@ -90,14 +82,14 @@ function AnimationPanel(editor) {
var animation = animations[ object.id ];
var playButton = new Button( 'Play' ).onClick( function () {
var playButton = new UI.Button( 'Play' ).onClick( function () {
animation.play();
} );
animationsRow.add( playButton );
var pauseButton = new Button( 'Stop' ).onClick( function () {
var pauseButton = new UI.Button( 'Stop' ).onClick( function () {
animation.stop();

49
src/panel/geometry/BoxGeometryPanel.js
View File

@ -1,13 +1,4 @@
import Panel from '../../ui/Panel';
import Row from '../../ui/Row';
import HorizontalRule from '../../ui/HorizontalRule';
import Text from '../../ui/Text';
import Boolean from '../../ui/Boolean';
import Break from '../../ui/Break';
import Button from '../../ui/Button';
import Number from '../../ui/Number';
import Integer from '../../ui/Integer';
import SetGeometryCommand from '../../command/SetGeometryCommand';
import SetGeometryCommand from '../../command/SetGeometryCommand';
/**
* @author mrdoob / http://mrdoob.com/
@ -17,67 +8,67 @@ function BoxGeometryPanel(editor, object) {
var signals = editor.signals;
var container = new Row();
var container = new UI.Row();
var geometry = object.geometry;
var parameters = geometry.parameters;
// width
var widthRow = new Row();
var width = new Number(parameters.width).onChange(update);
var widthRow = new UI.Row();
var width = new UI.Number(parameters.width).onChange(update);
widthRow.add(new Text('宽度').setWidth('90px'));
widthRow.add(new UI.Text('宽度').setWidth('90px'));
widthRow.add(width);
container.add(widthRow);
// height
var heightRow = new Row();
var height = new Number(parameters.height).onChange(update);
var heightRow = new UI.Row();
var height = new UI.Number(parameters.height).onChange(update);
heightRow.add(new Text('高度').setWidth('90px'));
heightRow.add(new UI.Text('高度').setWidth('90px'));
heightRow.add(height);
container.add(heightRow);
// depth
var depthRow = new Row();
var depth = new Number(parameters.depth).onChange(update);
var depthRow = new UI.Row();
var depth = new UI.Number(parameters.depth).onChange(update);
depthRow.add(new Text('深度').setWidth('90px'));
depthRow.add(new UI.Text('深度').setWidth('90px'));
depthRow.add(depth);
container.add(depthRow);
// widthSegments
var widthSegmentsRow = new Row();
var widthSegments = new Integer(parameters.widthSegments).setRange(1, Infinity).onChange(update);
var widthSegmentsRow = new UI.Row();
var widthSegments = new UI.Integer(parameters.widthSegments).setRange(1, Infinity).onChange(update);
widthSegmentsRow.add(new Text('宽度段数').setWidth('90px'));
widthSegmentsRow.add(new UI.Text('宽度段数').setWidth('90px'));
widthSegmentsRow.add(widthSegments);
container.add(widthSegmentsRow);
// heightSegments
var heightSegmentsRow = new Row();
var heightSegments = new Integer(parameters.heightSegments).setRange(1, Infinity).onChange(update);
var heightSegmentsRow = new UI.Row();
var heightSegments = new UI.Integer(parameters.heightSegments).setRange(1, Infinity).onChange(update);
heightSegmentsRow.add(new Text('高度段数').setWidth('90px'));
heightSegmentsRow.add(new UI.Text('高度段数').setWidth('90px'));
heightSegmentsRow.add(heightSegments);
container.add(heightSegmentsRow);
// depthSegments
var depthSegmentsRow = new Row();
var depthSegments = new Integer(parameters.depthSegments).setRange(1, Infinity).onChange(update);
var depthSegmentsRow = new UI.Row();
var depthSegments = new UI.Integer(parameters.depthSegments).setRange(1, Infinity).onChange(update);
depthSegmentsRow.add(new Text('深度段数').setWidth('90px'));
depthSegmentsRow.add(new UI.Text('深度段数').setWidth('90px'));
depthSegmentsRow.add(depthSegments);
container.add(depthSegmentsRow);

34
src/ui/Boolean.js
View File

@ -1,34 +0,0 @@
import Span from './Span';
import Checkbox from './Checkbox';
import Text from './Text';
function Boolean(boolean, text) {
Span.call(this);
this.setMarginRight('10px');
this.checkbox = new Checkbox(boolean);
this.text = new Text(text).setMarginLeft('3px');
this.add(this.checkbox);
this.add(this.text);
};
Boolean.prototype = Object.create(Span.prototype);
Boolean.prototype.constructor = Boolean;
Boolean.prototype.getValue = function () {
return this.checkbox.getValue();
};
Boolean.prototype.setValue = function (value) {
return this.checkbox.setValue(value);
};
export default Boolean;

21
src/ui/Break.js
View File

@ -1,21 +0,0 @@
import Element from './Element';
// Break
function Break() {
Element.call(this);
var dom = document.createElement('br');
dom.className = 'Break';
this.dom = dom;
return this;
};
Break.prototype = Object.create(Element.prototype);
Break.prototype.constructor = Break;
export default Break;

30
src/ui/Button.js
View File

@ -1,30 +0,0 @@
import Element from './Element';
// Button
function Button(value) {
Element.call(this);
var dom = document.createElement('button');
dom.className = 'Button';
this.dom = dom;
this.dom.textContent = value;
return this;
};
Button.prototype = Object.create(Element.prototype);
Button.prototype.constructor = Button;
Button.prototype.setLabel = function (value) {
this.dom.textContent = value;
return this;
};
export default Button;

43
src/ui/Checkbox.js
View File

@ -1,43 +0,0 @@
import Element from './Element';
// Checkbox
function Checkbox(boolean) {
Element.call(this);
var scope = this;
var dom = document.createElement('input');
dom.className = 'Checkbox';
dom.type = 'checkbox';
this.dom = dom;
this.setValue(boolean);
return this;
};
Checkbox.prototype = Object.create(Element.prototype);
Checkbox.prototype.constructor = Checkbox;
Checkbox.prototype.getValue = function () {
return this.dom.checked;
};
Checkbox.prototype.setValue = function (value) {
if (value !== undefined) {
this.dom.checked = value;
}
return this;
};
export default Checkbox;

63
src/ui/Color.js
View File

@ -1,63 +0,0 @@
import Element from './Element';
// Color
function Color() {
Element.call(this);
var scope = this;
var dom = document.createElement('input');
dom.className = 'Color';
dom.style.width = '64px';
dom.style.height = '17px';
dom.style.border = '0px';
dom.style.padding = '2px';
dom.style.backgroundColor = 'transparent';
try {
dom.type = 'color';
dom.value = '#ffffff';
} catch (exception) { }
this.dom = dom;
return this;
};
Color.prototype = Object.create(Element.prototype);
Color.prototype.constructor = Color;
Color.prototype.getValue = function () {
return this.dom.value;
};
Color.prototype.getHexValue = function () {
return parseInt(this.dom.value.substr(1), 16);
};
Color.prototype.setValue = function (value) {
this.dom.value = value;
return this;
};
Color.prototype.setHexValue = function (hex) {
this.dom.value = '#' + ('000000' + hex.toString(16)).slice(- 6);
return this;
};
export default Color;

18
src/ui/Div.js
View File

@ -1,18 +0,0 @@
import Element from './Element';
// Div
function Div() {
Element.call(this);
this.dom = document.createElement('div');
return this;
};
Div.prototype = Object.create(Element.prototype);
Div.prototype.constructor = Div;
export default Div;

151
src/ui/Element.js
View File

@ -1,151 +0,0 @@
/**
* @author mrdoob / http://mrdoob.com/
*/
function Element(dom) {
this.dom = dom;
};
Element.prototype = {
add: function () {
for (var i = 0; i < arguments.length; i++) {
var argument = arguments[i];
if (argument instanceof Element) {
this.dom.appendChild(argument.dom);
} else {
console.error('Element:', argument, 'is not an instance of Element.');
}
}
return this;
},
remove: function () {
for (var i = 0; i < arguments.length; i++) {
var argument = arguments[i];
if (argument instanceof Element) {
this.dom.removeChild(argument.dom);
} else {
console.error('Element:', argument, 'is not an instance of Element.');
}
}
return this;
},
clear: function () {
while (this.dom.children.length) {
this.dom.removeChild(this.dom.lastChild);
}
},
setId: function (id) {
this.dom.id = id;
return this;
},
setClass: function (name) {
this.dom.className = name;
return this;
},
setStyle: function (style, array) {
for (var i = 0; i < array.length; i++) {
this.dom.style[style] = array[i];
}
return this;
},
setDisabled: function (value) {
this.dom.disabled = value;
return this;
},
setTextContent: function (value) {
this.dom.textContent = value;
return this;
}
};
// properties
var properties = ['position', 'left', 'top', 'right', 'bottom', 'width', 'height', 'border', 'borderLeft',
'borderTop', 'borderRight', 'borderBottom', 'borderColor', 'display', 'overflow', 'margin', 'marginLeft', 'marginTop', 'marginRight', 'marginBottom', 'padding', 'paddingLeft', 'paddingTop', 'paddingRight', 'paddingBottom', 'color',
'background', 'backgroundColor', 'opacity', 'fontSize', 'fontWeight', 'textAlign', 'textDecoration', 'textTransform', 'cursor', 'zIndex'];
properties.forEach(function (property) {
var method = 'set' + property.substr(0, 1).toUpperCase() + property.substr(1, property.length);
Element.prototype[method] = function () {
this.setStyle(property, arguments);
return this;
};
});
// events
var events = ['KeyUp', 'KeyDown', 'MouseOver', 'MouseOut', 'Click', 'DblClick', 'Change'];
events.forEach(function (event) {
var method = 'on' + event;
Element.prototype[method] = function (callback) {
this.dom.addEventListener(event.toLowerCase(), callback.bind(this), false);
return this;
};
});
export default Element;

21
src/ui/HorizontalRule.js
View File

@ -1,21 +0,0 @@
import Element from './Element';
// HorizontalRule
function HorizontalRule() {
Element.call(this);
var dom = document.createElement('hr');
dom.className = 'HorizontalRule';
this.dom = dom;
return this;
};
HorizontalRule.prototype = Object.create(Element.prototype);
HorizontalRule.prototype.constructor = HorizontalRule;
export default HorizontalRule;

46
src/ui/Input.js
View File

@ -1,46 +0,0 @@
import Element from './Element';
// Input
function Input(text) {
Element.call(this);
var scope = this;
var dom = document.createElement('input');
dom.className = 'Input';
dom.style.padding = '2px';
dom.style.border = '1px solid transparent';
dom.addEventListener('keydown', function (event) {
event.stopPropagation();
}, false);
this.dom = dom;
this.setValue(text);
return this;
};
Input.prototype = Object.create(Element.prototype);
Input.prototype.constructor = Input;
Input.prototype.getValue = function () {
return this.dom.value;
};
Input.prototype.setValue = function (value) {
this.dom.value = value;
return this;
};
export default Input;

164
src/ui/Integer.js
View File

@ -1,164 +0,0 @@
import Element from './Element';
// Integer
function Integer(number) {
Element.call(this);
var scope = this;
var dom = document.createElement('input');
dom.className = 'Number';
dom.value = '0';
dom.addEventListener('keydown', function (event) {
event.stopPropagation();
}, false);
this.value = 0;
this.min = - Infinity;
this.max = Infinity;
this.step = 1;
this.dom = dom;
this.setValue(number);
var changeEvent = document.createEvent('HTMLEvents');
changeEvent.initEvent('change', true, true);
var distance = 0;
var onMouseDownValue = 0;
var pointer = [0, 0];
var prevPointer = [0, 0];
function onMouseDown(event) {
event.preventDefault();
distance = 0;
onMouseDownValue = scope.value;
prevPointer = [event.clientX, event.clientY];
document.addEventListener('mousemove', onMouseMove, false);
document.addEventListener('mouseup', onMouseUp, false);
}
function onMouseMove(event) {
var currentValue = scope.value;
pointer = [event.clientX, event.clientY];
distance += (pointer[0] - prevPointer[0]) - (pointer[1] - prevPointer[1]);
var value = onMouseDownValue + (distance / (event.shiftKey ? 5 : 50)) * scope.step;
value = Math.min(scope.max, Math.max(scope.min, value)) | 0;
if (currentValue !== value) {
scope.setValue(value);
dom.dispatchEvent(changeEvent);
}
prevPointer = [event.clientX, event.clientY];
}
function onMouseUp(event) {
document.removeEventListener('mousemove', onMouseMove, false);
document.removeEventListener('mouseup', onMouseUp, false);
if (Math.abs(distance) < 2) {
dom.focus();
dom.select();
}
}
function onChange(event) {
scope.setValue(dom.value);
}
function onFocus(event) {
dom.style.backgroundColor = '';
dom.style.cursor = '';
}
function onBlur(event) {
dom.style.backgroundColor = 'transparent';
dom.style.cursor = 'col-resize';
}
onBlur();
dom.addEventListener('mousedown', onMouseDown, false);
dom.addEventListener('change', onChange, false);
dom.addEventListener('focus', onFocus, false);
dom.addEventListener('blur', onBlur, false);
return this;
};
Integer.prototype = Object.create(Element.prototype);
Integer.prototype.constructor = Integer;
Integer.prototype.getValue = function () {
return this.value;
};
Integer.prototype.setValue = function (value) {
if (value !== undefined) {
value = parseInt(value);
this.value = value;
this.dom.value = value;
}
return this;
};
Integer.prototype.setStep = function (step) {
this.step = parseInt(step);
return this;
};
Integer.prototype.setRange = function (min, max) {
this.min = min;
this.max = max;
return this;
};
export default Integer;

61
src/ui/Modal.js
View File

@ -1,61 +0,0 @@
import Element from './Element';
import Panel from './Panel';
// Modal
function Modal(value) {
var scope = this;
var dom = document.createElement('div');
dom.style.position = 'absolute';
dom.style.width = '100%';
dom.style.height = '100%';
dom.style.backgroundColor = 'rgba(0,0,0,0.5)';
dom.style.display = 'none';
dom.style.alignItems = 'center';
dom.style.justifyContent = 'center';
dom.addEventListener('click', function (event) {
scope.hide();
});
this.dom = dom;
this.container = new Panel();
this.container.dom.style.width = '200px';
this.container.dom.style.padding = '20px';
this.container.dom.style.backgroundColor = '#ffffff';
this.container.dom.style.boxShadow = '0px 5px 10px rgba(0,0,0,0.5)';
this.add(this.container);
return this;
};
Modal.prototype = Object.create(Element.prototype);
Modal.prototype.constructor = Modal;
Modal.prototype.show = function (content) {
this.container.clear();
this.container.add(content);
this.dom.style.display = 'flex';
return this;
};
Modal.prototype.hide = function () {
this.dom.style.display = 'none';
return this;
};
export default Modal;

189
src/ui/Number.js
View File

@ -1,189 +0,0 @@
import Element from './Element';
// Number
function Number(number) {
Element.call(this);
var scope = this;
var dom = document.createElement('input');
dom.className = 'Number';
dom.value = '0.00';
dom.addEventListener('keydown', function (event) {
event.stopPropagation();
if (event.keyCode === 13) dom.blur();
}, false);
this.value = 0;
this.min = - Infinity;
this.max = Infinity;
this.precision = 2;
this.step = 1;
this.unit = '';
this.dom = dom;
this.setValue(number);
var changeEvent = document.createEvent('HTMLEvents');
changeEvent.initEvent('change', true, true);
var distance = 0;
var onMouseDownValue = 0;
var pointer = [0, 0];
var prevPointer = [0, 0];
function onMouseDown(event) {
event.preventDefault();
distance = 0;
onMouseDownValue = scope.value;
prevPointer = [event.clientX, event.clientY];
document.addEventListener('mousemove', onMouseMove, false);
document.addEventListener('mouseup', onMouseUp, false);
}
function onMouseMove(event) {
var currentValue = scope.value;
pointer = [event.clientX, event.clientY];
distance += (pointer[0] - prevPointer[0]) - (pointer[1] - prevPointer[1]);
var value = onMouseDownValue + (distance / (event.shiftKey ? 5 : 50)) * scope.step;
value = Math.min(scope.max, Math.max(scope.min, value));
if (currentValue !== value) {
scope.setValue(value);
dom.dispatchEvent(changeEvent);
}
prevPointer = [event.clientX, event.clientY];
}
function onMouseUp(event) {
document.removeEventListener('mousemove', onMouseMove, false);
document.removeEventListener('mouseup', onMouseUp, false);
if (Math.abs(distance) < 2) {
dom.focus();
dom.select();
}
}
function onChange(event) {
scope.setValue(dom.value);
}
function onFocus(event) {
dom.style.backgroundColor = '';
dom.style.cursor = '';
}
function onBlur(event) {
dom.style.backgroundColor = 'transparent';
dom.style.cursor = 'col-resize';
}
onBlur();
dom.addEventListener('mousedown', onMouseDown, false);
dom.addEventListener('change', onChange, false);
dom.addEventListener('focus', onFocus, false);
dom.addEventListener('blur', onBlur, false);
return this;
};
Number.prototype = Object.create(Element.prototype);
Number.prototype.constructor = Number;
Number.prototype.getValue = function () {
return this.value;
};
Number.prototype.setValue = function (value) {
if (value !== undefined) {
value = parseFloat(value);
if (value < this.min) value = this.min;
if (value > this.max) value = this.max;
this.value = value;
this.dom.value = value.toFixed(this.precision);
if (this.unit !== '') this.dom.value += ' ' + this.unit;
}
return this;
};
Number.prototype.setPrecision = function (precision) {
this.precision = precision;
return this;
};
Number.prototype.setStep = function (step) {
this.step = step;
return this;
};
Number.prototype.setRange = function (min, max) {
this.min = min;
this.max = max;
return this;
};
Number.prototype.setUnit = function (unit) {
this.unit = unit;
return this;
};
export default Number;

270
src/ui/Outliner.js
View File

@ -1,270 +0,0 @@
import Element from './Element';
// Outliner
function Outliner(editor) {
Element.call(this);
var scope = this;
var dom = document.createElement('div');
dom.className = 'Outliner';
dom.tabIndex = 0; // keyup event is ignored without setting tabIndex
// hack
this.scene = editor.scene;
// Prevent native scroll behavior
dom.addEventListener('keydown', function (event) {
switch (event.keyCode) {
case 38: // up
case 40: // down
event.preventDefault();
event.stopPropagation();
break;
}
}, false);
// Keybindings to support arrow navigation
dom.addEventListener('keyup', function (event) {
switch (event.keyCode) {
case 38: // up
scope.selectIndex(scope.selectedIndex - 1);
break;
case 40: // down
scope.selectIndex(scope.selectedIndex + 1);
break;
}
}, false);
this.dom = dom;
this.options = [];
this.selectedIndex = - 1;
this.selectedValue = null;
return this;
};
Outliner.prototype = Object.create(Element.prototype);
Outliner.prototype.constructor = Outliner;
Outliner.prototype.selectIndex = function (index) {
if (index >= 0 && index < this.options.length) {
this.setValue(this.options[index].value);
var changeEvent = document.createEvent('HTMLEvents');
changeEvent.initEvent('change', true, true);
this.dom.dispatchEvent(changeEvent);
}
};
Outliner.prototype.setOptions = function (options) {
var scope = this;
while (scope.dom.children.length > 0) {
scope.dom.removeChild(scope.dom.firstChild);
}
function onClick() {
scope.setValue(this.value);
var changeEvent = document.createEvent('HTMLEvents');
changeEvent.initEvent('change', true, true);
scope.dom.dispatchEvent(changeEvent);
}
// Drag
var currentDrag;
function onDrag(event) {
currentDrag = this;
}
function onDragStart(event) {
event.dataTransfer.setData('text', 'foo');
}
function onDragOver(event) {
if (this === currentDrag) return;
var area = event.offsetY / this.clientHeight;
if (area < 0.25) {
this.className = 'option dragTop';
} else if (area > 0.75) {
this.className = 'option dragBottom';
} else {
this.className = 'option drag';
}
}
function onDragLeave() {
if (this === currentDrag) return;
this.className = 'option';
}
function onDrop(event) {
if (this === currentDrag) return;
this.className = 'option';
var scene = scope.scene;
var object = scene.getObjectById(currentDrag.value);
var area = event.offsetY / this.clientHeight;
if (area < 0.25) {
var nextObject = scene.getObjectById(this.value);
moveObject(object, nextObject.parent, nextObject);
} else if (area > 0.75) {
var nextObject = scene.getObjectById(this.nextSibling.value);
moveObject(object, nextObject.parent, nextObject);
} else {
var parentObject = scene.getObjectById(this.value);
moveObject(object, parentObject);
}
}
function moveObject(object, newParent, nextObject) {
if (nextObject === null) nextObject = undefined;
var newParentIsChild = false;
object.traverse(function (child) {
if (child === newParent) newParentIsChild = true;
});
if (newParentIsChild) return;
editor.execute(new MoveObjectCommand(object, newParent, nextObject));
var changeEvent = document.createEvent('HTMLEvents');
changeEvent.initEvent('change', true, true);
scope.dom.dispatchEvent(changeEvent);
}
//
scope.options = [];
for (var i = 0; i < options.length; i++) {
var div = options[i];
div.className = 'option';
scope.dom.appendChild(div);
scope.options.push(div);
div.addEventListener('click', onClick, false);
if (div.draggable === true) {
div.addEventListener('drag', onDrag, false);
div.addEventListener('dragstart', onDragStart, false); // Firefox needs this
div.addEventListener('dragover', onDragOver, false);
div.addEventListener('dragleave', onDragLeave, false);
div.addEventListener('drop', onDrop, false);
}
}
return scope;
};
Outliner.prototype.getValue = function () {
return this.selectedValue;
};
Outliner.prototype.setValue = function (value) {
for (var i = 0; i < this.options.length; i++) {
var element = this.options[i];
if (element.value === value) {
element.classList.add('active');
// scroll into view
var y = element.offsetTop - this.dom.offsetTop;
var bottomY = y + element.offsetHeight;
var minScroll = bottomY - this.dom.offsetHeight;
if (this.dom.scrollTop > y) {
this.dom.scrollTop = y;
} else if (this.dom.scrollTop < minScroll) {
this.dom.scrollTop = minScroll;
}
this.selectedIndex = i;
} else {
element.classList.remove('active');
}
}
this.selectedValue = value;
return this;
};
export default Outliner;

21
src/ui/Panel.js
View File

@ -1,21 +0,0 @@
import Element from './Element';
// Panel
function Panel() {
Element.call(this);
var dom = document.createElement('div');
dom.className = 'Panel';
this.dom = dom;
return this;
};
Panel.prototype = Object.create(Element.prototype);
Panel.prototype.constructor = Panel;
export default Panel;

20
src/ui/Row.js
View File

@ -1,20 +0,0 @@
import Element from './Element';
// Row
function Row() {
Element.call(this);
var dom = document.createElement('div');
dom.className = 'Row';
this.dom = dom;
return this;
};
Row.prototype = Object.create(Element.prototype);
Row.prototype.constructor = Row;
export default Row;

77
src/ui/Select.js
View File

@ -1,77 +0,0 @@
import Element from './Element';
// Select
function Select() {
Element.call(this);
var scope = this;
var dom = document.createElement('select');
dom.className = 'Select';
dom.style.padding = '2px';
this.dom = dom;
return this;
};
Select.prototype = Object.create(Element.prototype);
Select.prototype.constructor = Select;
Select.prototype.setMultiple = function (boolean) {
this.dom.multiple = boolean;
return this;
};
Select.prototype.setOptions = function (options) {
var selected = this.dom.value;
while (this.dom.children.length > 0) {
this.dom.removeChild(this.dom.firstChild);
}
for (var key in options) {
var option = document.createElement('option');
option.value = key;
option.innerHTML = options[key];
this.dom.appendChild(option);
}
this.dom.value = selected;
return this;
};
Select.prototype.getValue = function () {
return this.dom.value;
};
Select.prototype.setValue = function (value) {
value = String(value);
if (this.dom.value !== value) {
this.dom.value = value;
}
return this;
};
export default Select;

18
src/ui/Span.js
View File

@ -1,18 +0,0 @@
import Element from './Element';
// Span
function Span() {
Element.call(this);
this.dom = document.createElement('span');
return this;
};
Span.prototype = Object.create(Element.prototype);
Span.prototype.constructor = Span;
export default Span;

43
src/ui/Text.js
View File

@ -1,43 +0,0 @@
import Element from './Element';
// Text
function Text(text) {
Element.call(this);
var dom = document.createElement('span');
dom.className = 'Text';
dom.style.cursor = 'default';
dom.style.display = 'inline-block';
dom.style.verticalAlign = 'middle';
this.dom = dom;
this.setValue(text);
return this;
};
Text.prototype = Object.create(Element.prototype);
Text.prototype.constructor = Text;
Text.prototype.getValue = function () {
return this.dom.textContent;
};
Text.prototype.setValue = function (value) {
if (value !== undefined) {
this.dom.textContent = value;
}
return this;
};
export default Text;

57
src/ui/TextArea.js
View File

@ -1,57 +0,0 @@
import Element from './Element';
// TextArea
function TextArea() {
Element.call(this);
var scope = this;
var dom = document.createElement('textarea');
dom.className = 'TextArea';
dom.style.padding = '2px';
dom.spellcheck = false;
dom.addEventListener('keydown', function (event) {
event.stopPropagation();
if (event.keyCode === 9) {
event.preventDefault();
var cursor = dom.selectionStart;
dom.value = dom.value.substring(0, cursor) + '\t' + dom.value.substring(cursor);
dom.selectionStart = cursor + 1;
dom.selectionEnd = dom.selectionStart;
}
}, false);
this.dom = dom;
return this;
};
TextArea.prototype = Object.create(Element.prototype);
TextArea.prototype.constructor = TextArea;
TextArea.prototype.getValue = function () {
return this.dom.value;
};
TextArea.prototype.setValue = function (value) {
this.dom.value = value;
return this;
};
export default TextArea;

174
src/ui/Texture.js
View File

@ -1,174 +0,0 @@
import Element from './Element';
/**
* @author mrdoob / http://mrdoob.com/
*/
function Texture(mapping) {
Element.call(this);
var scope = this;
var dom = document.createElement('span');
var form = document.createElement('form');
var input = document.createElement('input');
input.type = 'file';
input.addEventListener('change', function (event) {
loadFile(event.target.files[0]);
});
form.appendChild(input);
var canvas = document.createElement('canvas');
canvas.width = 32;
canvas.height = 16;
canvas.style.cursor = 'pointer';
canvas.style.marginRight = '5px';
canvas.style.border = '1px solid #888';
canvas.addEventListener('click', function (event) {
input.click();
}, false);
canvas.addEventListener('drop', function (event) {
event.preventDefault();
event.stopPropagation();
loadFile(event.dataTransfer.files[0]);
}, false);
dom.appendChild(canvas);
var name = document.createElement('input');
name.disabled = true;
name.style.width = '64px';
name.style.border = '1px solid #ccc';
dom.appendChild(name);
function loadFile(file) {
if (file.type.match('image.*')) {
var reader = new FileReader();
if (file.type === 'image/targa') {
reader.addEventListener('load', function (event) {
var canvas = new THREE.TGALoader().parse(event.target.result);
var texture = new THREE.CanvasTexture(canvas, mapping);
texture.sourceFile = file.name;
scope.setValue(texture);
if (scope.onChangeCallback) scope.onChangeCallback();
}, false);
reader.readAsArrayBuffer(file);
} else {
reader.addEventListener('load', function (event) {
var image = document.createElement('img');
image.addEventListener('load', function (event) {
var texture = new THREE.Texture(this, mapping);
texture.sourceFile = file.name;
texture.format = file.type === 'image/jpeg' ? THREE.RGBFormat : THREE.RGBAFormat;
texture.needsUpdate = true;
scope.setValue(texture);
if (scope.onChangeCallback) scope.onChangeCallback();
}, false);
image.src = event.target.result;
}, false);
reader.readAsDataURL(file);
}
}
form.reset();
}
this.dom = dom;
this.texture = null;
this.onChangeCallback = null;
return this;
};
Texture.prototype = Object.create(Element.prototype);
Texture.prototype.constructor = Texture;
Texture.prototype.getValue = function () {
return this.texture;
};
Texture.prototype.setValue = function (texture) {
var canvas = this.dom.children[0];
var name = this.dom.children[1];
var context = canvas.getContext('2d');
if (texture !== null) {
var image = texture.image;
if (image !== undefined && image.width > 0) {
name.value = texture.sourceFile;
var scale = canvas.width / image.width;
context.drawImage(image, 0, 0, image.width * scale, image.height * scale);
} else {
name.value = texture.sourceFile + ' (error)';
context.clearRect(0, 0, canvas.width, canvas.height);
}
} else {
name.value = '';
if (context !== null) {
// Seems like context can be null if the canvas is not visible
context.clearRect(0, 0, canvas.width, canvas.height);
}
}
this.texture = texture;
};
Texture.prototype.onChange = function (callback) {
this.onChangeCallback = callback;
return this;
};
export default Texture;

25
src/ui/index.js
View File

@ -1,28 +1,3 @@
// ui.js
export { default as Element } from './Element';
export { default as Span } from './Span';
export { default as Div } from './Div';
export { default as Row } from './Row';
export { default as Panel } from './Panel';
export { default as Text } from './Text';
export { default as Input } from './Input';
export { default as TextArea } from './TextArea';
export { default as Select } from './Select';
export { default as Checkbox } from './Checkbox';
export { default as Color } from './Color';
export { default as Number } from './Number';
export { default as Integer } from './Integer';
export { default as Break } from './Break';
export { default as HorizontalRule } from './HorizontalRule';
export { default as Button } from './Button';
export { default as Modal } from './Modal';
// ui.three.js
export { default as Texture } from './Texture';
export { default as Outliner } from './Outliner';
export { default as Boolean } from './Boolean';
// editor
export { default as ViewportInfo } from './ViewportInfo';
export { default as Viewport } from './Viewport';
export { default as Toolbar } from './Toolbar';