-
Notifications
You must be signed in to change notification settings - Fork 12
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
simple prototype for panes, see #347
1 parent
82d08aa
commit f6c1e5e
Showing
3 changed files
with
191 additions
and
0 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,53 @@ | ||
// Copyright 2017, University of Colorado Boulder | ||
|
||
/** | ||
* A layer for managing pop ups and dialogs. Responsible for adding/removing/sorting nodes. | ||
* | ||
* @author Jesse Greenberg | ||
*/ | ||
|
||
define( function( require ) { | ||
'use strict'; | ||
|
||
// modules | ||
var inherit = require( 'PHET_CORE/inherit' ); | ||
var sun = require( 'SUN/sun' ); | ||
var Node = require( 'SCENERY/nodes/Node' ); | ||
|
||
// constants | ||
function PaneLayer() { | ||
Node.call( this, {} ); | ||
} | ||
|
||
sun.register( 'PaneLayer', PaneLayer ); | ||
|
||
return inherit( Node, PaneLayer, { | ||
|
||
// add a node to the front of this layer | ||
addToFront: function( node ) { | ||
this.addChild( node ); | ||
this.addPaneListeners( node ); | ||
}, | ||
|
||
// add a node to the back of this layer | ||
addToBack: function( node ) { | ||
this.insertChild( 0, node ); | ||
this.addPaneListeners( node ); | ||
}, | ||
|
||
// probably required when the sim size changes, re-position each node in the layer | ||
updateLayouts: function() { | ||
// ... | ||
}, | ||
|
||
// add listeners to the node that manage layering, removal, and so on. | ||
// TODO: make it possible to remove listeners | ||
addPaneListeners: function( node ) { | ||
node.addInputListener( { | ||
down: function() { | ||
node.moveToFront(); | ||
} | ||
} ); | ||
} | ||
} ); | ||
} ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,63 @@ | ||
// Copyright 2017, University of Colorado Boulder | ||
|
||
/** | ||
* A simple node that could be something like a Dialog for testing the new Dialog system. | ||
* @author Jesse Greenberg | ||
*/ | ||
|
||
define( function( require ) { | ||
'use strict'; | ||
|
||
// modules | ||
var inherit = require( 'PHET_CORE/inherit' ); | ||
var sun = require( 'SUN/sun' ); | ||
var Node = require( 'SCENERY/nodes/Node' ); | ||
var Rectangle = require( 'SCENERY/nodes/Rectangle' ); | ||
var DragListener = require( 'SCENERY/listeners/DragListener' ); | ||
var Property = require( 'AXON/Property' ); | ||
var Vector2 = require( 'DOT/Vector2' ); | ||
|
||
// constants | ||
function SunDialog( options ) { | ||
|
||
options = _.extend( { | ||
content: null // content for the dialog | ||
}, options ); | ||
|
||
Node.call( this, options ); | ||
|
||
// placeholder for the dialog rectangle | ||
var dialogRectangle = new Rectangle( 0, 0, 200, 50, 5, 5, { fill: getRandomColor() } ); | ||
this.addChild( dialogRectangle ); | ||
|
||
// add the custom content | ||
if ( options.content ) { | ||
dialogRectangle.addChild( options.content ); | ||
options.content.center = dialogRectangle.center; | ||
} | ||
|
||
var locationProperty = new Property( new Vector2( 0, 0 ) ); | ||
this.addInputListener( new DragListener( { | ||
locationProperty: locationProperty | ||
} ) ); | ||
|
||
var self = this; | ||
locationProperty.link( function( location ) { | ||
self.translation = location; | ||
} ); | ||
} | ||
|
||
// get a random color to fill the dialog | ||
function getRandomColor() { | ||
var rR = Math.floor( Math.random() * 255 ); | ||
var rG = Math.floor( Math.random() * 255 ); | ||
var rB = Math.floor( Math.random() * 255 ); | ||
var a = 0.75; | ||
|
||
return 'rgba(' + rR + ',' + rG + ',' + rB +',' + a + ')'; | ||
} | ||
|
||
sun.register( 'SunDialog', SunDialog ); | ||
|
||
return inherit( Node, SunDialog, {} ); | ||
} ); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,75 @@ | ||
// Copyright 2017, University of Colorado Boulder | ||
|
||
/** | ||
* A singleton type that manages a PaneLayer. As a singleton, it makes it relatively easy to add or remove nodes | ||
* from the layer. The LayerPane of this topPane is responsible for adding/removing nodes and listeners that | ||
* manage the layer. | ||
* | ||
* topPane.addToFront( node ); | ||
* @author Jesse Greenberg | ||
*/ | ||
|
||
define( function( require ) { | ||
'use strict'; | ||
|
||
// modules | ||
var inherit = require( 'PHET_CORE/inherit' ); | ||
var sun = require( 'SUN/sun' ); | ||
var PaneLayer = require( 'SUN/PaneLayer' ); | ||
|
||
// flag that makes sure only one instance of this exists | ||
var initialized = false; | ||
|
||
/** | ||
* @return {} | ||
* @constructor | ||
*/ | ||
function topPane() { | ||
this.initialize(); | ||
} | ||
|
||
inherit( Object, topPane, { | ||
|
||
/** | ||
* Construct the singleton instance. | ||
*/ | ||
initialize: function() { | ||
assert && assert( initialized === false, 'topPane is a singleton, there should only be one instance' ); | ||
initialized = true; | ||
|
||
// @public - the PaneLayer that will manage all nodes in this top layer | ||
this.frontLayer = new PaneLayer(); | ||
}, | ||
|
||
/** | ||
* Add a node to the back of this pane. | ||
* | ||
* @param {node} node | ||
*/ | ||
addToBack: function( node ) { | ||
this.frontLayer.addToBack( node ); | ||
}, | ||
|
||
/** | ||
* Add a node to the front of this pane. | ||
* | ||
* @param {Node} node | ||
*/ | ||
addToFront: function( node ) { | ||
this.frontLayer.addToFront( node ); | ||
}, | ||
|
||
/** | ||
* Probably required to manage layout when application is resized | ||
* | ||
* @return {} | ||
*/ | ||
updateLayouts: function() { | ||
this.frontLayer.updateLayouts(); | ||
} | ||
} ); | ||
|
||
var instance = new topPane(); | ||
sun.register( 'topPane', instance ); | ||
return instance; | ||
} ); |