Skip to content

Commit 458b888

Browse files
mrdoobmrdoob
committed
GUI: Base of Color module.
1 parent c3b2fd0 commit 458b888

File tree

3 files changed

+69
-21
lines changed

3 files changed

+69
-21
lines changed

‎gui/js/UI.js

Lines changed: 42 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -243,9 +243,42 @@ UI.Text.prototype.setText = function ( value ) {
243243
};
244244

245245

246-
// FloatNumber
246+
// Color
247247

248-
UI.FloatNumber = function ( position ) {
248+
UI.Color = function ( position ) {
249+
250+
UI.Element.call( this );
251+
252+
this.dom = document.createElement( 'span' );
253+
this.dom.style.position = position || 'relative';
254+
this.dom.style.width = '64px';
255+
this.dom.style.height = '16px';
256+
this.dom.style.backgroundColor = '#000000';
257+
258+
return this;
259+
260+
};
261+
262+
UI.Color.prototype = new UI.Element();
263+
UI.Color.prototype.constructor = UI.Color;
264+
265+
UI.Color.prototype.getValue = function () {
266+
267+
return this.dom.style.backgroundColor;
268+
269+
};
270+
271+
UI.Color.prototype.setValue = function ( value ) {
272+
273+
this.dom.style.backgroundColor = value;
274+
return this;
275+
276+
};
277+
278+
279+
// Number
280+
281+
UI.Number = function ( position ) {
249282

250283
UI.Element.call( this );
251284

@@ -318,37 +351,37 @@ UI.FloatNumber = function ( position ) {
318351

319352
};
320353

321-
UI.FloatNumber.prototype = new UI.Element();
322-
UI.FloatNumber.prototype.constructor = UI.FloatNumber;
354+
UI.Number.prototype = new UI.Element();
355+
UI.Number.prototype.constructor = UI.Number;
323356

324-
UI.FloatNumber.prototype.getValue = function () {
357+
UI.Number.prototype.getValue = function () {
325358

326359
return parseFloat( this.dom.value );
327360

328361
};
329362

330-
UI.FloatNumber.prototype.setValue = function ( value ) {
363+
UI.Number.prototype.setValue = function ( value ) {
331364

332365
this.dom.value = value.toFixed( 2 );
333366
return this;
334367

335368
};
336369

337-
UI.FloatNumber.prototype.setMin = function ( value ) {
370+
UI.Number.prototype.setMin = function ( value ) {
338371

339372
this.min = value;
340373
return this;
341374

342375
};
343376

344-
UI.FloatNumber.prototype.setMax = function ( value ) {
377+
UI.Number.prototype.setMax = function ( value ) {
345378

346379
this.max = value;
347380
return this;
348381

349382
};
350383

351-
UI.FloatNumber.prototype.onChange = function ( callback ) {
384+
UI.Number.prototype.onChange = function ( callback ) {
352385

353386
this.onChangeCallback = callback;
354387
return this;

‎gui/js/ui/Sidebar.Properties.Material.js

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -17,17 +17,30 @@ Sidebar.Properties.Material = function ( signals ) {
1717
container.add( new UI.HorizontalRule() );
1818

1919
container.add( new UI.Text().setText( 'Color' ).setColor( '#666' ) );
20-
var materialColor = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
20+
21+
var materialColor = new UI.Color( 'absolute' ).setLeft( '90px' );
2122
container.add( materialColor );
2223
container.add( new UI.HorizontalRule() );
2324

25+
container.add( new UI.Text().setText( 'Ambient' ).setColor( '#666' ) );
26+
27+
var materialAmbient = new UI.Color( 'absolute' ).setLeft( '90px' );
28+
container.add( materialAmbient );
29+
container.add( new UI.HorizontalRule() );
30+
31+
container.add( new UI.Text().setText( 'Specular' ).setColor( '#666' ) );
32+
33+
var materialSpecular = new UI.Color( 'absolute' ).setLeft( '90px' );
34+
container.add( materialSpecular );
35+
container.add( new UI.HorizontalRule() );
36+
2437
container.add( new UI.Text().setText( 'Map' ).setColor( '#666' ) );
2538
var materialMap = new UI.Text( 'absolute' ).setLeft( '90px' ).setColor( '#444' ).setFontSize( '12px' );
2639
container.add( materialMap );
2740
container.add( new UI.HorizontalRule() );
2841

2942
container.add( new UI.Text().setText( 'Opacity' ).setColor( '#666' ) );
30-
var materialOpacity = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).setMin( 0 ).setMax( 1 ).onChange( update );
43+
var materialOpacity = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).setMin( 0 ).setMax( 1 ).onChange( update );
3144
container.add( materialOpacity );
3245
container.add( new UI.HorizontalRule() );
3346

@@ -61,7 +74,9 @@ Sidebar.Properties.Material = function ( signals ) {
6174

6275
materialName.setText( object.material.name );
6376
materialClass.setText( getMaterialInstanceName( object.material ) );
64-
materialColor.setText( '#' + object.material.color.getHex().toString(16) );
77+
materialColor.setValue( '#' + object.material.color.getHex().toString( 16 ) );
78+
if ( object.material.ambient ) materialAmbient.setValue( '#' + object.material.ambient.getHex().toString( 16 ) );
79+
if ( object.material.specular ) materialSpecular.setValue( '#' + object.material.specular.getHex().toString( 16 ) );
6580
materialMap.setText( object.material.map );
6681
materialOpacity.setValue( object.material.opacity );
6782
materialTransparent.setText( object.material.transparent );

‎gui/js/ui/Sidebar.Properties.Object3D.js

Lines changed: 9 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -12,23 +12,23 @@ Sidebar.Properties.Object3D = function ( signals ) {
1212
container.add( new UI.HorizontalRule() );
1313

1414
container.add( new UI.Text().setText( 'Position' ).setColor( '#666' ) );
15-
var positionX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).onChange( update );
16-
var positionY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).setWidth( '60px' ).onChange( update );
17-
var positionZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).setWidth( '60px' ).onChange( update );
15+
var positionX = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).onChange( update );
16+
var positionY = new UI.Number( 'absolute' ).setLeft( '160px' ).setWidth( '60px' ).onChange( update );
17+
var positionZ = new UI.Number( 'absolute' ).setLeft( '230px' ).setWidth( '60px' ).onChange( update );
1818
container.add( positionX, positionY, positionZ );
1919
container.add( new UI.HorizontalRule() );
2020

2121
container.add( new UI.Text().setText( 'Rotation' ).setColor( '#666' ) );
22-
var rotationX = new UI.FloatNumber( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).onChange( update );
23-
var rotationY = new UI.FloatNumber( 'absolute' ).setLeft( '160px' ).setWidth( '60px' ).onChange( update );
24-
var rotationZ = new UI.FloatNumber( 'absolute' ).setLeft( '230px' ).setWidth( '60px' ).onChange( update );
22+
var rotationX = new UI.Number( 'absolute' ).setLeft( '90px' ).setWidth( '60px' ).onChange( update );
23+
var rotationY = new UI.Number( 'absolute' ).setLeft( '160px' ).setWidth( '60px' ).onChange( update );
24+
var rotationZ = new UI.Number( 'absolute' ).setLeft( '230px' ).setWidth( '60px' ).onChange( update );
2525
container.add( rotationX, rotationY, rotationZ );
2626
container.add( new UI.HorizontalRule() );
2727

2828
container.add( new UI.Text().setText( 'Scale' ).setColor( '#666' ) );
29-
var scaleX = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '90px' ).setWidth( '60px' ).onChange( update );
30-
var scaleY = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '160px' ).setWidth( '60px' ).onChange( update );
31-
var scaleZ = new UI.FloatNumber( 'absolute' ).setValue( 1 ).setLeft( '230px' ).setWidth( '60px' ).onChange( update );
29+
var scaleX = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '90px' ).setWidth( '60px' ).onChange( update );
30+
var scaleY = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '160px' ).setWidth( '60px' ).onChange( update );
31+
var scaleZ = new UI.Number( 'absolute' ).setValue( 1 ).setLeft( '230px' ).setWidth( '60px' ).onChange( update );
3232
container.add( scaleX, scaleY, scaleZ );
3333
container.add( new UI.Break(), new UI.Break(), new UI.Break() );
3434

0 commit comments

Comments
 (0)