Skip to content

Commit

Permalink
simple prototype for panes, see #347
Browse files Browse the repository at this point in the history
jessegreenberg committed Mar 29, 2018

Verified

This commit was signed with the committer’s verified signature.
scottopell Scott Opell
1 parent 82d08aa commit f6c1e5e
Showing 3 changed files with 191 additions and 0 deletions.
53 changes: 53 additions & 0 deletions js/PaneLayer.js
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();
}
} );
}
} );
} );
63 changes: 63 additions & 0 deletions js/SunDialog.js
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, {} );
} );
75 changes: 75 additions & 0 deletions js/topPane.js
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;
} );

0 comments on commit f6c1e5e

Please sign in to comment.