Skip to content

Commit e1461e8

Browse files
mrdoobmrdoob
committed
Editor: New scripting system working \o/
1 parent 2d05e45 commit e1461e8

6 files changed

Lines changed: 128 additions & 37 deletions

File tree

‎editor/css/main.css‎

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@ button {
1919
}
2020

2121
textarea {
22+
tab-size: 4;
2223
white-space: pre;
2324
word-wrap: normal;
2425
}
@@ -121,4 +122,4 @@ textarea, input { outline: none; } /* osx */
121122

122123
.MeshPhongMaterial {
123124
color: #ffaa88;
124-
}
125+
}

‎editor/index.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -174,6 +174,7 @@
174174
signals.objectRemoved.add( saveState );
175175
signals.materialChanged.add( saveState );
176176
signals.sceneGraphChanged.add( saveState );
177+
signals.scriptChanged.add( saveState );
177178

178179
var showDialog = function ( content ) {
179180

‎editor/js/Sidebar.Script.js‎

Lines changed: 21 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -18,41 +18,46 @@ Sidebar.Script = function ( editor ) {
1818
container.addStatic( new UI.Text( 'Script' ).setTextTransform( 'uppercase' ) );
1919
container.add( new UI.Break() );
2020

21-
var scripts = new UI.Panel();
22-
container.add( scripts );
23-
2421
//
2522

26-
var scriptEvent = new UI.Select();
27-
scriptEvent.setOptions( {
23+
var scriptsContainer = new UI.Panel();
24+
container.add( scriptsContainer );
25+
26+
var eventType = new UI.Select();
27+
eventType.setOptions( {
2828

2929
'init': 'init',
3030
'keydown': 'keydown',
3131
'keyup': 'keyup',
32+
'mousedown': 'mousedown',
33+
'mouseup': 'mouseup',
34+
'mousemove': 'mousemove',
3235
'update': 'update'
3336

3437
} );
35-
container.add( scriptEvent );
38+
container.add( eventType );
3639

37-
var addButton = new UI.Button( 'Add' );
38-
addButton.onClick( function () {
40+
var button = new UI.Button( 'Add' );
41+
button.setMarginLeft( '5px' );
42+
button.onClick( function () {
3943

4044
var script = new UI.ScriptEditor();
45+
script.setValue( { event: eventType.getValue(), source: '' } );
4146
script.onChange( function () {
4247

4348
signals.scriptChanged.dispatch();
4449

4550
} );
46-
scripts.add( script );
51+
scriptsContainer.add( script );
4752

4853
} );
49-
container.add( addButton );
54+
container.add( button );
5055

5156
// signals
5257

5358
signals.objectSelected.add( function ( object ) {
5459

55-
scripts.clear();
60+
scriptsContainer.clear();
5661

5762
if ( object !== null ) {
5863

@@ -64,16 +69,14 @@ Sidebar.Script = function ( editor ) {
6469

6570
for ( var i = 0; i < sources.length; i ++ ) {
6671

67-
var source = sources[ i ];
68-
6972
var script = new UI.ScriptEditor();
70-
script.setValue( source );
73+
script.setValue( sources[ i ] );
7174
script.onChange( function () {
7275

7376
signals.scriptChanged.dispatch();
7477

7578
} );
76-
scripts.add( script );
79+
scriptsContainer.add( script );
7780

7881
}
7982

@@ -92,9 +95,10 @@ Sidebar.Script = function ( editor ) {
9295
var array = [];
9396
var object = editor.selected;
9497

95-
for ( var i = 0; i < scripts.children.length; i ++ ) {
98+
for ( var i = 0; i < scriptsContainer.children.length; i ++ ) {
99+
100+
var script = scriptsContainer.children[ i ];
96101

97-
var script = scripts.children[ i ];
98102
array.push( script.getValue() );
99103

100104
}

‎editor/js/libs/app.js‎

Lines changed: 72 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,7 @@ var APP = {
99
var loader = new THREE.ObjectLoader();
1010
var camera, scene, renderer;
1111

12-
var scripts = {
13-
update: []
14-
};
12+
var scripts = {};
1513

1614
this.dom = undefined;
1715

@@ -21,27 +19,38 @@ var APP = {
2119
renderer.setPixelRatio( window.devicePixelRatio );
2220

2321
camera = loader.parse( json.camera );
24-
2522
scene = loader.parse( json.scene );
2623

27-
scripts.update = [];
24+
scripts = {
25+
init: [],
26+
keydown: [],
27+
keyup: [],
28+
mousedown: [],
29+
mouseup: [],
30+
mousemove: [],
31+
update: []
32+
};
2833

2934
for ( var uuid in json.scripts ) {
3035

3136
var object = scene.getObjectByProperty( 'uuid', uuid, true );
37+
3238
var sources = json.scripts[ uuid ];
3339

3440
for ( var i = 0; i < sources.length; i ++ ) {
3541

36-
var source = sources[ i ];
42+
var script = sources[ i ];
3743

38-
var script = ( new Function( 'scene', 'time', source ).bind( object ) );
39-
scripts.update.push( script );
44+
script.compiled = new Function( 'event', script.source ).bind( object );
45+
46+
scripts[ script.event ].push( script.compiled );
4047

4148
}
4249

4350
}
4451

52+
dispatch( scripts.init, {} );
53+
4554
this.dom = renderer.domElement;
4655

4756
};
@@ -55,34 +64,84 @@ var APP = {
5564

5665
};
5766

67+
var dispatch = function ( array, event ) {
68+
69+
for ( var i = 0, l = array.length; i < l; i ++ ) {
70+
71+
array[ i ]( event );
72+
73+
}
74+
75+
};
76+
5877
var request;
5978

6079
var animate = function ( time ) {
6180

6281
request = requestAnimationFrame( animate );
6382

64-
for ( var i = 0, l = scripts.update.length; i < l; i ++ ) {
65-
66-
scripts.update[ i ]( scene, time );
67-
68-
}
83+
dispatch( scripts.update, { time: time } );
6984

7085
renderer.render( scene, camera );
7186

7287
};
7388

7489
this.play = function () {
7590

91+
document.addEventListener( 'keydown', onDocumentKeyDown );
92+
document.addEventListener( 'keyup', onDocumentKeyUp );
93+
document.addEventListener( 'mousedown', onDocumentMouseDown );
94+
document.addEventListener( 'mouseup', onDocumentMouseUp );
95+
document.addEventListener( 'mousemove', onDocumentMouseMove );
96+
7697
request = requestAnimationFrame( animate );
7798

7899
};
79100

80101
this.stop = function () {
81102

103+
document.removeEventListener( 'keydown', onDocumentKeyDown );
104+
document.removeEventListener( 'keyup', onDocumentKeyUp );
105+
document.removeEventListener( 'mousedown', onDocumentMouseDown );
106+
document.removeEventListener( 'mouseup', onDocumentMouseUp );
107+
document.removeEventListener( 'mousemove', onDocumentMouseMove );
108+
82109
cancelAnimationFrame( request );
83110

84111
};
85112

113+
//
114+
115+
var onDocumentKeyDown = function ( event ) {
116+
117+
dispatch( scripts.keydown, event );
118+
119+
};
120+
121+
var onDocumentKeyUp = function ( event ) {
122+
123+
dispatch( scripts.keyup, event );
124+
125+
};
126+
127+
var onDocumentMouseDown = function ( event ) {
128+
129+
dispatch( scripts.mousedown, event );
130+
131+
};
132+
133+
var onDocumentMouseUp = function ( event ) {
134+
135+
dispatch( scripts.mouseup, event );
136+
137+
};
138+
139+
var onDocumentMouseMove = function ( event ) {
140+
141+
dispatch( scripts.mousemove, event );
142+
143+
};
144+
86145
}
87146

88147
};

‎editor/js/libs/ui.editor.js‎

Lines changed: 14 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -10,8 +10,13 @@ UI.ScriptEditor = function () {
1010

1111
var timeout;
1212

13+
var event = new UI.Text( '' );
14+
this.add( event );
15+
16+
this.add( new UI.Break() );
17+
1318
var textarea = new UI.TextArea();
14-
textarea.setWidth( '240px' );
19+
textarea.setWidth( '100%' );
1520
textarea.setHeight( '100px' );
1621
textarea.onKeyUp( function () {
1722

@@ -20,18 +25,19 @@ UI.ScriptEditor = function () {
2025
timeout = setTimeout( function () {
2126

2227
var object = editor.selected;
23-
var source = scope.getValue();
28+
var source = textarea.getValue();
2429

2530
try {
2631

27-
var script = new Function( 'scene', 'time', source ).bind( object.clone() );
28-
script( new THREE.Scene(), 0 );
32+
( new Function( 'event', source ).bind( object.clone() ) )( {} );
2933

3034
textarea.dom.classList.add( 'success' );
3135
textarea.dom.classList.remove( 'fail' );
3236

3337
} catch ( error ) {
3438

39+
console.error( error );
40+
3541
textarea.dom.classList.remove( 'success' );
3642
textarea.dom.classList.add( 'fail' );
3743

@@ -50,6 +56,7 @@ UI.ScriptEditor = function () {
5056
} );
5157
this.add( textarea );
5258

59+
this.event = event;
5360
this.textarea = textarea;
5461

5562
};
@@ -59,13 +66,14 @@ UI.ScriptEditor.prototype.constructor = UI.ScriptEditor;
5966

6067
UI.ScriptEditor.prototype.getValue = function () {
6168

62-
return this.textarea.getValue();
69+
return { event: this.event.getValue(), source: this.textarea.getValue() };
6370

6471
};
6572

6673
UI.ScriptEditor.prototype.setValue = function ( value ) {
6774

68-
this.textarea.setValue( value );
75+
this.event.setValue( value.event );
76+
this.textarea.setValue( value.source );
6977

7078
return this;
7179

‎editor/js/libs/ui.js‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -100,6 +100,7 @@ UI.Panel = function () {
100100
dom.className = 'Panel';
101101

102102
this.dom = dom;
103+
this.children = [];
103104

104105
return this;
105106
};
@@ -116,6 +117,7 @@ UI.Panel.prototype.add = function () {
116117
if ( argument instanceof UI.Element ) {
117118

118119
this.dom.appendChild( argument.dom );
120+
this.children.push( argument );
119121

120122
} else {
121123

@@ -140,6 +142,14 @@ UI.Panel.prototype.remove = function () {
140142

141143
this.dom.removeChild( argument.dom );
142144

145+
var index = this.children.indexOf( argument );
146+
147+
if ( index !== - 1 ) {
148+
149+
this.children.splice( index, 1 );
150+
151+
}
152+
143153
} else {
144154

145155
console.error( 'UI.Panel:', argument, 'is not an instance of UI.Element.' )
@@ -160,6 +170,8 @@ UI.Panel.prototype.clear = function () {
160170

161171
}
162172

173+
this.children = [];
174+
163175
};
164176

165177

@@ -307,6 +319,12 @@ UI.Text = function ( text ) {
307319
UI.Text.prototype = Object.create( UI.Element.prototype );
308320
UI.Text.prototype.constructor = UI.Text;
309321

322+
UI.Text.prototype.getValue = function () {
323+
324+
return this.dom.textContent;
325+
326+
};
327+
310328
UI.Text.prototype.setValue = function ( value ) {
311329

312330
if ( value !== undefined ) {

0 commit comments

Comments
 (0)