ui.three.js 8.2 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446
  1. /**
  2. * @author mrdoob / http://mrdoob.com/
  3. */
  4. UI.Texture = function ( mapping ) {
  5. UI.Element.call( this );
  6. var scope = this;
  7. var dom = document.createElement( 'span' );
  8. var input = document.createElement( 'input' );
  9. input.type = 'file';
  10. input.addEventListener( 'change', function ( event ) {
  11. loadFile( event.target.files[ 0 ] );
  12. } );
  13. var canvas = document.createElement( 'canvas' );
  14. canvas.width = 32;
  15. canvas.height = 16;
  16. canvas.style.cursor = 'pointer';
  17. canvas.style.marginRight = '5px';
  18. canvas.style.border = '1px solid #888';
  19. canvas.addEventListener( 'click', function ( event ) {
  20. input.click();
  21. }, false );
  22. canvas.addEventListener( 'drop', function ( event ) {
  23. event.preventDefault();
  24. event.stopPropagation();
  25. loadFile( event.dataTransfer.files[ 0 ] );
  26. }, false );
  27. dom.appendChild( canvas );
  28. var name = document.createElement( 'input' );
  29. name.disabled = true;
  30. name.style.width = '64px';
  31. name.style.border = '1px solid #ccc';
  32. dom.appendChild( name );
  33. var loadFile = function ( file ) {
  34. if ( file.type.match( 'image.*' ) ) {
  35. var reader = new FileReader();
  36. reader.addEventListener( 'load', function ( event ) {
  37. var image = document.createElement( 'img' );
  38. image.addEventListener( 'load', function( event ) {
  39. var texture = new THREE.Texture( this, mapping );
  40. texture.sourceFile = file.name;
  41. texture.needsUpdate = true;
  42. scope.setValue( texture );
  43. if ( scope.onChangeCallback ) scope.onChangeCallback();
  44. }, false );
  45. image.src = event.target.result;
  46. }, false );
  47. reader.readAsDataURL( file );
  48. }
  49. };
  50. this.dom = dom;
  51. this.texture = null;
  52. this.onChangeCallback = null;
  53. return this;
  54. };
  55. UI.Texture.prototype = Object.create( UI.Element.prototype );
  56. UI.Texture.prototype.constructor = UI.Texture;
  57. UI.Texture.prototype.getValue = function () {
  58. return this.texture;
  59. };
  60. UI.Texture.prototype.setValue = function ( texture ) {
  61. var canvas = this.dom.children[ 0 ];
  62. var name = this.dom.children[ 1 ];
  63. var context = canvas.getContext( '2d' );
  64. if ( texture !== null ) {
  65. var image = texture.image;
  66. if ( image !== undefined && image.width > 0 ) {
  67. name.value = texture.sourceFile;
  68. var scale = canvas.width / image.width;
  69. context.drawImage( image, 0, 0, image.width * scale, image.height * scale );
  70. } else {
  71. name.value = texture.sourceFile + ' (error)';
  72. context.clearRect( 0, 0, canvas.width, canvas.height );
  73. }
  74. } else {
  75. name.value = '';
  76. if ( context !== null ) {
  77. // Seems like context can be null if the canvas is not visible
  78. context.clearRect( 0, 0, canvas.width, canvas.height );
  79. }
  80. }
  81. this.texture = texture;
  82. };
  83. UI.Texture.prototype.onChange = function ( callback ) {
  84. this.onChangeCallback = callback;
  85. return this;
  86. };
  87. // Outliner
  88. UI.Outliner = function ( editor ) {
  89. UI.Element.call( this );
  90. var scope = this;
  91. var dom = document.createElement( 'div' );
  92. dom.className = 'Outliner';
  93. dom.tabIndex = 0; // keyup event is ignored without setting tabIndex
  94. // hack
  95. this.scene = editor.scene;
  96. // Prevent native scroll behavior
  97. dom.addEventListener( 'keydown', function ( event ) {
  98. switch ( event.keyCode ) {
  99. case 38: // up
  100. case 40: // down
  101. event.preventDefault();
  102. event.stopPropagation();
  103. break;
  104. }
  105. }, false );
  106. // Keybindings to support arrow navigation
  107. dom.addEventListener( 'keyup', function ( event ) {
  108. switch ( event.keyCode ) {
  109. case 38: // up
  110. scope.selectIndex( scope.selectedIndex - 1 );
  111. break;
  112. case 40: // down
  113. scope.selectIndex( scope.selectedIndex + 1 );
  114. break;
  115. }
  116. }, false );
  117. this.dom = dom;
  118. this.options = [];
  119. this.selectedIndex = - 1;
  120. this.selectedValue = null;
  121. return this;
  122. };
  123. UI.Outliner.prototype = Object.create( UI.Element.prototype );
  124. UI.Outliner.prototype.constructor = UI.Outliner;
  125. UI.Outliner.prototype.selectIndex = function ( index ) {
  126. if ( index >= 0 && index < this.options.length ) {
  127. this.setValue( this.options[ index ].value );
  128. var changeEvent = document.createEvent( 'HTMLEvents' );
  129. changeEvent.initEvent( 'change', true, true );
  130. this.dom.dispatchEvent( changeEvent );
  131. }
  132. };
  133. UI.Outliner.prototype.setOptions = function ( options ) {
  134. var scope = this;
  135. while ( scope.dom.children.length > 0 ) {
  136. scope.dom.removeChild( scope.dom.firstChild );
  137. }
  138. function onClick() {
  139. scope.setValue( this.value );
  140. var changeEvent = document.createEvent( 'HTMLEvents' );
  141. changeEvent.initEvent( 'change', true, true );
  142. scope.dom.dispatchEvent( changeEvent );
  143. }
  144. // Drag
  145. var currentDrag;
  146. function onDrag( event ) {
  147. currentDrag = this;
  148. }
  149. function onDragStart( event ) {
  150. event.dataTransfer.setData( 'text', 'foo' );
  151. }
  152. function onDragOver( event ) {
  153. if ( this === currentDrag ) return;
  154. var area = event.offsetY / this.clientHeight;
  155. if ( area < 0.25 ) {
  156. this.className = 'option dragTop';
  157. } else if ( area > 0.75 ) {
  158. this.className = 'option dragBottom';
  159. } else {
  160. this.className = 'option drag';
  161. }
  162. }
  163. function onDragLeave() {
  164. if ( this === currentDrag ) return;
  165. this.className = 'option';
  166. }
  167. function onDrop( event ) {
  168. if ( this === currentDrag ) return;
  169. this.className = 'option';
  170. var scene = scope.scene;
  171. var object = scene.getObjectById( currentDrag.value );
  172. var area = event.offsetY / this.clientHeight;
  173. if ( area < 0.25 ) {
  174. var nextObject = scene.getObjectById( this.value );
  175. moveObject( object, nextObject.parent, nextObject );
  176. } else if ( area > 0.75 ) {
  177. var nextObject = scene.getObjectById( this.nextSibling.value );
  178. moveObject( object, nextObject.parent, nextObject );
  179. } else {
  180. var parentObject = scene.getObjectById( this.value );
  181. moveObject( object, parentObject );
  182. }
  183. }
  184. function moveObject( object, newParent, nextObject ) {
  185. if ( nextObject === null ) nextObject = undefined;
  186. var newParentIsChild = false;
  187. object.traverse( function ( child ) {
  188. if ( child === newParent ) newParentIsChild = true;
  189. } );
  190. if ( newParentIsChild ) return;
  191. editor.execute( new MoveObjectCommand( object, newParent, nextObject ) );
  192. var changeEvent = document.createEvent( 'HTMLEvents' );
  193. changeEvent.initEvent( 'change', true, true );
  194. scope.dom.dispatchEvent( changeEvent );
  195. }
  196. //
  197. scope.options = [];
  198. for ( var i = 0; i < options.length; i ++ ) {
  199. var option = options[ i ];
  200. var div = document.createElement( 'div' );
  201. div.className = 'option';
  202. div.innerHTML = option.html;
  203. div.value = option.value;
  204. scope.dom.appendChild( div );
  205. scope.options.push( div );
  206. div.addEventListener( 'click', onClick, false );
  207. if ( option.static !== true ) {
  208. div.draggable = true;
  209. div.addEventListener( 'drag', onDrag, false );
  210. div.addEventListener( 'dragstart', onDragStart, false ); // Firefox needs this
  211. div.addEventListener( 'dragover', onDragOver, false );
  212. div.addEventListener( 'dragleave', onDragLeave, false );
  213. div.addEventListener( 'drop', onDrop, false );
  214. }
  215. }
  216. return scope;
  217. };
  218. UI.Outliner.prototype.getValue = function () {
  219. return this.selectedValue;
  220. };
  221. UI.Outliner.prototype.setValue = function ( value ) {
  222. for ( var i = 0; i < this.options.length; i ++ ) {
  223. var element = this.options[ i ];
  224. if ( element.value === value ) {
  225. element.classList.add( 'active' );
  226. // scroll into view
  227. var y = element.offsetTop - this.dom.offsetTop;
  228. var bottomY = y + element.offsetHeight;
  229. var minScroll = bottomY - this.dom.offsetHeight;
  230. if ( this.dom.scrollTop > y ) {
  231. this.dom.scrollTop = y;
  232. } else if ( this.dom.scrollTop < minScroll ) {
  233. this.dom.scrollTop = minScroll;
  234. }
  235. this.selectedIndex = i;
  236. } else {
  237. element.classList.remove( 'active' );
  238. }
  239. }
  240. this.selectedValue = value;
  241. return this;
  242. };
  243. UI.THREE = {};
  244. UI.THREE.Boolean = function ( boolean, text ) {
  245. UI.Span.call( this );
  246. this.setMarginRight( '10px' );
  247. this.checkbox = new UI.Checkbox( boolean );
  248. this.text = new UI.Text( text ).setMarginLeft( '3px' );
  249. this.add( this.checkbox );
  250. this.add( this.text );
  251. };
  252. UI.THREE.Boolean.prototype = Object.create( UI.Span.prototype );
  253. UI.THREE.Boolean.prototype.constructor = UI.THREE.Boolean;
  254. UI.THREE.Boolean.prototype.getValue = function () {
  255. return this.checkbox.getValue();
  256. };
  257. UI.THREE.Boolean.prototype.setValue = function ( value ) {
  258. return this.checkbox.setValue( value );
  259. };