From 40f8341731327d132dc717482b6c5501237c20bb Mon Sep 17 00:00:00 2001 From: -=yb4f310 Date: Mon, 22 May 2017 15:42:05 +0200 Subject: [PATCH] some gui stuff --- src/game-lib-a-component-a.js | 13 +- src/game-lib-api-entity.js | 13 +- src/game-lib-d3-api-material.js | 16 +- src/game-lib-d3-api-texture.js | 2 + src/game-lib-d3-input-editor.js | 5 +- src/game-lib-d3-material.js | 2 +- src/game-lib-d3-texture.js | 22 ++- src/game-lib-entity-manager.js | 8 +- src/game-lib-entity.js | 8 +- src/game-lib-gui.js | 315 ++++++++++++++++---------------- src/game-lib-system.js | 4 +- 11 files changed, 226 insertions(+), 182 deletions(-) diff --git a/src/game-lib-a-component-a.js b/src/game-lib-a-component-a.js index c541376..6d95aa8 100644 --- a/src/game-lib-a-component-a.js +++ b/src/game-lib-a-component-a.js @@ -6,13 +6,15 @@ * @param loaded * @param parentEntity * @param selected + * @param guiProperties */ GameLib.Component = function( componentType, linkedObjects, loaded, parentEntity, - selected + selected, + guiProperties ) { GameLib.API.Component.call( this, @@ -30,11 +32,20 @@ GameLib.Component = function( this.built = true; //this.linkedObjects.parentEntity = GameLib.Entity; + + if (GameLib.Utils.UndefinedOrNull(guiProperties)) { + guiProperties = {}; + } + this.guiProperties = guiProperties; }; GameLib.Component.prototype = Object.create(GameLib.API.Component.prototype); GameLib.Component.prototype.constructor = GameLib.Component; +GameLib.Component.prototype.toString = function() { + return this.id; +}; + GameLib.Component.COMPONENT_PATH_FOLLOWING = 0x1; GameLib.Component.COMPONENT_MATERIAL = 0x2; GameLib.Component.COMPONENT_RENDERER = 0x3; diff --git a/src/game-lib-api-entity.js b/src/game-lib-api-entity.js index 8eb509a..01752c1 100644 --- a/src/game-lib-api-entity.js +++ b/src/game-lib-api-entity.js @@ -4,19 +4,26 @@ * @param name * @param components GameLib.Component[] * @param parentEntity GameLib.Entity + * @param parentEntityManager * @constructor */ GameLib.API.Entity = function( id, name, components, - parentEntity + parentEntity, + parentEntityManager ) { if (GameLib.Utils.UndefinedOrNull(parentEntity)) { parentEntity = null; } this.parentEntity = parentEntity; + if (GameLib.Utils.UndefinedOrNull(parentEntityManager)) { + parentEntityManager = null; + } + this.parentEntityManager = parentEntityManager; + GameLib.Component.call( this, GameLib.Component.COMPONENT_ENTITY, @@ -62,6 +69,8 @@ GameLib.API.Entity.FromObjectEntity = function(objectEntity) { return new GameLib.API.Entity( objectEntity.id, objectEntity.name, - apiComponents + apiComponents, + objectEntity.parentEntity, + objectEntity.parentEntityManager ) }; diff --git a/src/game-lib-d3-api-material.js b/src/game-lib-d3-api-material.js index b9f82da..951bc22 100644 --- a/src/game-lib-d3-api-material.js +++ b/src/game-lib-d3-api-material.js @@ -69,6 +69,7 @@ * @param roughnessMap * @param specularMap * @param parentEntity + * @param selected * @constructor */ GameLib.D3.API.Material = function( @@ -140,7 +141,8 @@ GameLib.D3.API.Material = function( normalMap, roughnessMap, specularMap, - parentEntity + parentEntity, + selected ) { GameLib.Component.call( @@ -161,7 +163,8 @@ GameLib.D3.API.Material = function( 'specularMap' : GameLib.D3.Texture }, false, - parentEntity + parentEntity, + selected ); if (GameLib.Utils.UndefinedOrNull(id)) { @@ -503,6 +506,11 @@ GameLib.D3.API.Material = function( specularMap = null; } this.specularMap = specularMap; + + if (GameLib.Utils.UndefinedOrNull(selected)) { + selected = false; + } + this.selected = selected; }; GameLib.D3.API.Material.prototype = Object.create(GameLib.Component.prototype); @@ -644,6 +652,8 @@ GameLib.D3.API.Material.FromObjectMaterial = function(objectMaterial) { apiMetalnessMap, apiNormalMap, apiRoughnessMap, - apiSpecularMap + apiSpecularMap, + objectMaterial.parentEntity, + objectMaterial.selected ) }; diff --git a/src/game-lib-d3-api-texture.js b/src/game-lib-d3-api-texture.js index 40fd46c..3dd02a2 100644 --- a/src/game-lib-d3-api-texture.js +++ b/src/game-lib-d3-api-texture.js @@ -165,6 +165,8 @@ GameLib.D3.API.Texture = function( encoding = GameLib.D3.Texture.TYPE_LINEAR_ENCODING; } this.encoding = encoding; + + this.needsUpdate = false; }; GameLib.D3.API.Texture.prototype = Object.create(GameLib.Component.prototype); diff --git a/src/game-lib-d3-input-editor.js b/src/game-lib-d3-input-editor.js index 12c06ba..7cd8e94 100644 --- a/src/game-lib-d3-input-editor.js +++ b/src/game-lib-d3-input-editor.js @@ -159,9 +159,10 @@ GameLib.D3.Input.Editor.prototype.onMouseMove = function(entity) { /** * MouseDown events * @param entity GameLib.Entity + * @param entityManager GameLib.EntityManager * @returns {Function} */ -GameLib.D3.Input.Editor.prototype.onMouseDown = function(entity) { +GameLib.D3.Input.Editor.prototype.onMouseDown = function(entity, entityManager) { return function(event) { @@ -269,7 +270,7 @@ GameLib.D3.Input.Editor.prototype.onMouseDown = function(entity) { } } - gui.build(); + gui.build(entityManager); } } } diff --git a/src/game-lib-d3-material.js b/src/game-lib-d3-material.js index 8ab2f1b..c5cdc64 100644 --- a/src/game-lib-d3-material.js +++ b/src/game-lib-d3-material.js @@ -279,7 +279,7 @@ GameLib.D3.Material = function( this.needsUpdate = false; - this.buildIdToObject(); + this.buildIdToObject(); this.instance = this.createInstance(); diff --git a/src/game-lib-d3-texture.js b/src/game-lib-d3-texture.js index d6fa013..e09d0e1 100644 --- a/src/game-lib-d3-texture.js +++ b/src/game-lib-d3-texture.js @@ -215,16 +215,18 @@ GameLib.D3.Texture.prototype.createInstance = function(update) { } instance.name = this.name; - instance.flipY = this.flipY; - instance.encoding = this.encoding; - instance.offset.x = this.offset.x; - instance.offset.y = this.offset.y; - instance.repeat.x = this.repeat.x; - instance.repeat.y = this.repeat.y; - instance.mipmaps = this.mipmaps; - instance.unpackAlignment = this.unpackAlignment; - instance.premultiplyAlpha = this.premultiplyAlpha; - instance.textureType = this.textureType; + // instance.flipY = this.flipY; + // instance.encoding = this.encoding; + // instance.offset.x = this.offset.x; + // instance.offset.y = this.offset.y; + // instance.repeat.x = this.repeat.x; + // instance.repeat.y = this.repeat.y; + // instance.mipmaps = this.mipmaps; + // instance.unpackAlignment = this.unpackAlignment; + // instance.premultiplyAlpha = this.premultiplyAlpha; + // instance.textureType = this.textureType; + + instance.needsUpdate = true; return instance; }; diff --git a/src/game-lib-entity-manager.js b/src/game-lib-entity-manager.js index fe51541..4294f2b 100644 --- a/src/game-lib-entity-manager.js +++ b/src/game-lib-entity-manager.js @@ -88,7 +88,10 @@ GameLib.EntityManager.prototype.createEntity = function(name) { var apiEntity = new GameLib.API.Entity( null, - name + name, + null, + null, + this ); var entity = new GameLib.Entity( @@ -106,6 +109,7 @@ GameLib.EntityManager.prototype.createEntity = function(name) { * @param entity GameLib.Entity */ GameLib.EntityManager.prototype.addEntity = function(entity) { + entity.parentEntityManager = this; this.entities.push(entity); }; @@ -148,6 +152,8 @@ GameLib.EntityManager.prototype.removeEntity = function(entity) { return false; } + entity.parentEntityManager = null; + this.entities.splice(index, 1); return true; }; diff --git a/src/game-lib-entity.js b/src/game-lib-entity.js index d90da4f..b81f498 100644 --- a/src/game-lib-entity.js +++ b/src/game-lib-entity.js @@ -24,7 +24,9 @@ GameLib.Entity = function ( this, apiEntity.id, apiEntity.name, - apiEntity.components + apiEntity.components, + apiEntity.parentEntity, + apiEntity.parentEntityManager ); this.componentToCreate = 0; @@ -203,7 +205,9 @@ GameLib.Entity.prototype.toApiObject = function() { return new GameLib.API.Entity( this.id, this.name, - apiComponents + apiComponents, + this.parentEntity.id, + this.parentEntityManager.id ); }; diff --git a/src/game-lib-gui.js b/src/game-lib-gui.js index a50e0fb..1f2262f 100644 --- a/src/game-lib-gui.js +++ b/src/game-lib-gui.js @@ -110,11 +110,6 @@ GameLib.GUI.prototype.createInstance = function(update) { instance = this.instance; } else { instance = new dat.GUI( { autoPlace: false } ); - - - - - } return instance; @@ -161,6 +156,10 @@ GameLib.GUI.prototype.isNumber = function(member) { return (typeof member === 'number'); }; +GameLib.GUI.prototype.isVector2 = function(member) { + return (member instanceof GameLib.Vector2); +}; + // GameLib.GUI.prototype.isColor = function(member) { // return (member instanceof GameLib.API.Color); // }; @@ -202,13 +201,13 @@ GameLib.GUI.prototype.isNumber = function(member) { GameLib.GUI.prototype.buildControl = function(folder, object, property) { - var controllers = []; + var handles = []; if ( this.isString(object[property]) || this.isBoolean(object[property]) ) { - controllers.push(folder.add(object, property).name(property).listen()); + handles.push(folder.add(object, property).name(property).listen()); } if (this.isNumber(object[property])) { @@ -220,7 +219,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { } // if (object instanceof GameLib.Entity && property == 'componentToCreate') { - // controllers.push( + // handles.push( // folder.add( // object, // property, @@ -256,7 +255,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { // ); // // } else if (object instanceof GameLib.System && property == 'systemType') { - // controllers.push( + // handles.push( // folder.add( // object, // property, @@ -271,7 +270,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { // } else if (object instanceof GameLib.D3.Material && property === 'side') { - controllers.push( + handles.push( folder.add( object, property, @@ -283,7 +282,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { ).name(property).listen() ); } else if (object instanceof GameLib.D3.Material && property === 'combine') { - controllers.push( + handles.push( folder.add( object, property, @@ -295,7 +294,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { ).name(property).listen() ); } else if (object instanceof GameLib.D3.Material && property === 'vertexColors') { - controllers.push( + handles.push( folder.add( object, property, @@ -307,7 +306,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { ).name(property).listen() ); } else if (object instanceof GameLib.D3.Material && property === 'blending') { - controllers.push( + handles.push( folder.add( object, property, @@ -320,7 +319,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { ).name(property).listen() ); } else if (object instanceof GameLib.D3.Material && property === 'blendSrc') { - controllers.push( + handles.push( folder.add( object, property,- @@ -340,7 +339,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { ).name(property).listen() ); } else if (object instanceof GameLib.D3.Material && property === 'blendDst') { - controllers.push( + handles.push( folder.add( object, property, @@ -360,7 +359,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { ).name(property).listen() ); } else if (object instanceof GameLib.D3.Material && property === 'blendEquation') { - controllers.push( + handles.push( folder.add( object, property, @@ -374,7 +373,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { ).name(property).listen() ); } else if (object instanceof GameLib.D3.Material && property === 'depthFunc') { - controllers.push( + handles.push( folder.add( object, property, @@ -391,7 +390,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { ).name(property).listen() ); } else if (object instanceof GameLib.D3.Material && property === 'shading') { - controllers.push( + handles.push( folder.add( object, property, @@ -402,7 +401,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { ).name(property).listen() ); } else if (object instanceof GameLib.D3.Texture && property === 'wrapS') { - controllers.push( + handles.push( folder.add( object, property, @@ -414,7 +413,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { ).name(property).listen() ); } else if (object instanceof GameLib.D3.Texture && property === 'wrapT') { - controllers.push( + handles.push( folder.add( object, property, @@ -426,7 +425,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { ).name(property).listen() ); } else if (object instanceof GameLib.D3.Texture && property === 'format') { - controllers.push( + handles.push( folder.add( object, property, @@ -441,7 +440,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { ).name(property).listen() ); } else if (object instanceof GameLib.D3.Texture && property === 'mapping') { - controllers.push( + handles.push( folder.add( object, property, @@ -458,7 +457,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { ).name(property).listen() ); } else if (object instanceof GameLib.D3.Texture && property === 'magFilter') { - controllers.push( + handles.push( folder.add( object, property, @@ -473,7 +472,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { ).name(property).listen() ); } else if (object instanceof GameLib.D3.Texture && property === 'minFilter') { - controllers.push(folder.add( + handles.push(folder.add( object, property, { @@ -487,7 +486,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { ).name(property).listen() ); } else if (object instanceof GameLib.D3.Texture && property === 'textureType') { - controllers.push( + handles.push( folder.add( object, property, @@ -504,7 +503,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { ).name(property).listen() ); } else if (object instanceof GameLib.D3.Texture && property === 'encoding') { - controllers.push( + handles.push( folder.add( object, property, @@ -530,43 +529,43 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { property === 'metalness' || property === 'roughness' ) { - controllers.push(folder.add(object, property, 0, 1.0).step(0.001).name(property).listen()); + handles.push(folder.add(object, property, 0, 1.0).step(0.001).name(property).listen()); } else if ( property === 'shininess' || property === 'fov' ) { - controllers.push(folder.add(object, property, -255, 255).step(1).name(property).listen()); + handles.push(folder.add(object, property, -255, 255).step(1).name(property).listen()); } else if ( property === 'aspect' ) { - controllers.push(folder.add(object, property, 0, 5).step(0.001).name(property).listen()); + handles.push(folder.add(object, property, 0, 5).step(0.001).name(property).listen()); } else if ( property === 'angle' || // property == 'width' || // property == 'height' || property === 'depth' ) { - controllers.push(folder.add(object, property, -Math.PI, Math.PI).step(0.0001).name(property).listen()); + handles.push(folder.add(object, property, -Math.PI, Math.PI).step(0.0001).name(property).listen()); } else if ( property === 'near' || property === 'distanceGrain' || property === 'bumpScale' || property === 'envMapIntensity' ) { - controllers.push(folder.add(object, property, 0, 100).step(0.001).name(property).listen()); + handles.push(folder.add(object, property, 0, 100).step(0.001).name(property).listen()); } else if ( property === 'heightOffset' || property === 'rotationFactor' ) { - controllers.push(folder.add(object, property, -100, 100).step(0.001).name(property).listen()); + handles.push(folder.add(object, property, -100, 100).step(0.001).name(property).listen()); } else { - controllers.push(folder.add(object, property, -10000, 10000).step(grain).name(property).listen()); + handles.push(folder.add(object, property, -10000, 10000).step(grain).name(property).listen()); } } } if (this.isColor(object[property])) { - controllers.push(folder.addColor({hexColor : object[property].toHex()}, 'hexColor').name(property).listen()); + handles.push(folder.addColor({hexColor : object[property].toHex()}, 'hexColor').name(property).listen()); } // // if (this.isFutureObject(object, property)) { @@ -610,7 +609,7 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { // } // } // - // controllers.push( + // handles.push( // folder.add( // guiObject, // 'id', @@ -650,27 +649,123 @@ GameLib.GUI.prototype.buildControl = function(folder, object, property) { // ).name('create a ' + property.replace(/s$/,'')); // } // - // for (var c = 0; c < controllers.length; c++) { + + // handles.map(function(handle){ // - // var controller = controllers[c]; - // - // controller.onChange(this.onPropertyChange(this, affectedObjectProperties)); + // handle.onChange( + // this.onPropertyChange( + // this, + // affectedObjectProperties + // ) + // ); // // if (property === 'name') { - // controller.onFinishChange(this.buildObjectSelection.bind(this)); + // handle.onFinishChange( + // this.buildObjectSelection.bind(this) + // ); // } - // } + // }); + + handles.map( + function(handle) { + handle.onChange( + function (value) { + if (object[property] instanceof GameLib.Color) { + object[property].fromHex(value); + } else { + object[property] = value; + } + object.updateInstance(); + object.needsUpdate = true; + } + ); + } + ); + +}; + + + +GameLib.GUI.prototype.buildVectorControl = function(folder, object, property, dimension) { + + if (dimension === 4) { + folder.add( + object[property], + 'w', + object[property].w + ).name(property + '.w').listen().onChange(function(){object.updateInstance()}); + } + + folder.add( + object[property], + 'x', + object[property].x + ).name(property + '.x').listen().onChange(function(){object.updateInstance()}); + + folder.add( + object[property], + 'y', + object[property].y + ).name(property + '.y').listen().onChange(function(){object.updateInstance()}); + + if ( + dimension === 3 || + dimension === 4 + ) { + folder.add( + object[property], + 'z', + object[property].z + ).name(property + '.z').listen().onChange(function () { + object.updateInstance() + }); + } +}; + +GameLib.GUI.prototype.buildSelectControl = function(folder, object, property, entityManager, constructor, parentObject) { + + var objects = entityManager.queryComponents(constructor); + + var idToObject = {}; + + var options = objects.reduce( + function(result, obj) { + result[obj.name] = obj; + idToObject[obj.id] = obj; + return result; + }, + { + 'none' : null + } + ); + + folder.add( + object, + property, + options + ).name(property).listen().onChange(function(value){ + if (value !== 'null') { + object[property] = idToObject[value]; + } else { + object[property] = null; + } + parentObject.buildIdToObject(); + object.updateInstance(); + this.build(entityManager); + }.bind(this)); }; /** * Builds the GUI */ -GameLib.GUI.prototype.build = function() { +GameLib.GUI.prototype.build = function(entityManager) { this.instance.removeAllFolders(); var discoveredObjects = []; + var parentObject = this.objects[0]; + this.objects.map( function(object) { @@ -690,6 +785,7 @@ GameLib.GUI.prototype.build = function() { ); discoveredObjects.map( + function(object) { var apiObject = object.toApiObject(); @@ -703,14 +799,30 @@ GameLib.GUI.prototype.build = function() { apiObject.hasOwnProperty(property) && object.hasOwnProperty(property) ) { - if (typeof (object[property]) === 'object') { + if ( + object.linkedObjects && + object.linkedObjects[property] + ) { + + if (object.linkedObjects[property] instanceof Array) { + console.log('ignored array : ' + property); + } else { + this.buildSelectControl(folder, object, property, entityManager, object.linkedObjects[property], parentObject); + } + + } else if (typeof (object[property]) === 'object') { if (this.isColor(object[property])) { this.buildControl(folder, object, property); + } else if (object[property] instanceof GameLib.Vector2) { + this.buildVectorControl(folder, object, property, 2); + } else if (object[property] instanceof GameLib.Vector3) { + this.buildVectorControl(folder, object, property, 3); + } else if (object[property] instanceof GameLib.Vector4) { + this.buildVectorControl(folder, object, property, 4); } else { console.log('ignored: ' + property); } - } else { this.buildControl(folder, object, property); } @@ -723,120 +835,7 @@ GameLib.GUI.prototype.build = function() { } } }.bind(this) + ); -}; - -//returns params, a stripped version of paramsGUI, without all the GUI fluff -GameLib.GUI.prototype.glue = function(paramsGUI, optionsGUI){ - - //pass options to GUI e.g., { autoPlace: false } - optionsGUI = optionsGUI || {}; - - //extra parameter whether you want folders open or closed - optionsGUI.folded = optionsGUI.folded || false; - - // params is a stripped version of paramsGUI, where everything - // but its default attributes have been removed - var params = {}; - - this.renderParameters(paramsGUI, optionsGUI, params); - - //return stripped parameter object - return params; -}; - -GameLib.GUI.prototype.renderParameters = function(paramsGUI, optionsGUI, params){ - - //initial creation - var gui = this.instance; - - //walk the parameter tree - unfurl(paramsGUI, gui, params); - - function unfurl(obj, folder, params){ - - for (var key in obj) { - - var subObj = obj[key]; - var leaf = isLeaf(subObj); - - if (leaf){ - addToFolder(key, obj, subObj, folder, params); - } - else{ - //is folder - var subfolder = folder.addFolder(key); - if (!optionsGUI.folded) - subfolder.open(); - - params[key] = {}; - unfurl(obj[key], subfolder, params[key]); - } - - } - - //a leaf object is one that contains no other objects - //it is critical that none of the tracked parameters is itself an object - function isLeaf(obj){ - - var Leaf = true; - for (var key in obj){ - - if (key === 'choices' && obj.display === 'selector') continue; - - if (Leaf){ - var isObj = (Object.prototype.toString.call( obj[key] ) !== '[object Object]'); - Leaf = Leaf && isObj; - } - else - continue; - } - - return Leaf; - - } - - } - - function addToFolder(key, obj, options, folder, params){ - - var handle; - params[key] = options.value; - - var display = options.display || ''; - - switch (display){ - case 'range': - if (options.step) - handle = folder.add(params, key, options.min, options.max).step(options.step); - else - handle = folder.add(params, key, options.min, options.max); - break; - case 'selector': - handle = folder.add(params, key, options.choices); - break; - case 'color': - handle = folder.addColor(params, key); - break; - case 'none': - break; - default: - handle = folder.add(params, key); - break; - } - - if (handle && options.onChange) - handle.onChange(options.onChange); - - if (handle && options.onFinishChange) - handle.onChange(options.onFinishChange); - - if (handle && options.listen) - handle.listen(); - - } - - return gui; - }; \ No newline at end of file diff --git a/src/game-lib-system.js b/src/game-lib-system.js index 1001224..579cdd3 100644 --- a/src/game-lib-system.js +++ b/src/game-lib-system.js @@ -66,7 +66,7 @@ GameLib.System.prototype.start = function() { var component = entity.getFirstComponent(GameLib.D3.Input.Editor); - component.mouseDown = component.onMouseDown(entity).bind(component); + component.mouseDown = component.onMouseDown(entity, this.entityManager).bind(component); component.mouseMove = component.onMouseMove(entity).bind(component); component.keyDown = component.onKeyDown(entity).bind(component); @@ -78,7 +78,7 @@ GameLib.System.prototype.start = function() { component.camera.instance, component.domElement.instance ); - }) + }.bind(this)) }