From 5120462cbca14f90889551f522e280fe5a465cac Mon Sep 17 00:00:00 2001 From: samreid Date: Mon, 14 Dec 2020 15:23:39 -0700 Subject: [PATCH] Generalize ZoomButtonGroup and create subclasses with Plus/Minus or MagnifyingGlass, see https://github.com/phetsims/circuit-construction-kit-common/issues/620 --- js/MagnifyingGlassZoomButtonGroup.js | 45 ++++++++++++++++++++++++ js/PlusMinusZoomButtonGroup.js | 51 ++++++++++++++++++++++++++++ js/ZoomButtonGroup.js | 22 +++++------- 3 files changed, 104 insertions(+), 14 deletions(-) create mode 100644 js/MagnifyingGlassZoomButtonGroup.js create mode 100644 js/PlusMinusZoomButtonGroup.js diff --git a/js/MagnifyingGlassZoomButtonGroup.js b/js/MagnifyingGlassZoomButtonGroup.js new file mode 100644 index 000000000..942714c33 --- /dev/null +++ b/js/MagnifyingGlassZoomButtonGroup.js @@ -0,0 +1,45 @@ +// Copyright 2020, University of Colorado Boulder + +import Dimension2 from '../../dot/js/Dimension2.js'; +import merge from '../../phet-core/js/merge.js'; +import MagnifyingGlassNode from './MagnifyingGlassNode.js'; +import MinusNode from './MinusNode.js'; +import PlusNode from './PlusNode.js'; +import sceneryPhet from './sceneryPhet.js'; +import ZoomButtonGroup from './ZoomButtonGroup.js'; + +/** + * ZoomButtonGroup that shows magnifying glass icons + * @author Sam Reid (PhET Interactive Simulations) + */ +class MagnifyingGlassZoomButtonGroup extends ZoomButtonGroup { + + /** + * @param {NumberProperty} zoomLevelProperty - smaller value means more zoomed out + * @param {Object} [options] + */ + constructor( zoomLevelProperty, options ) { + + options = merge( { + magnifyingGlassNodeOptions: { + glassRadius: 10 + } + }, options ); + + + // plus or minus sign in middle of magnifying glass + const signOptions = { + size: new Dimension2( + 1.3 * options.magnifyingGlassNodeOptions.glassRadius, + options.magnifyingGlassNodeOptions.glassRadius / 3 + ) + }; + + const zoomInIcon = new MagnifyingGlassNode( merge( {}, options.magnifyingGlassNodeOptions, { icon: new PlusNode( signOptions ) } ) ); + const zoomOutIcon = new MagnifyingGlassNode( merge( {}, options.magnifyingGlassNodeOptions, { icon: new MinusNode( signOptions ) } ) ); + super( zoomInIcon, zoomOutIcon, zoomLevelProperty, options ); + } +} + +sceneryPhet.register( 'MagnifyingGlassZoomButtonGroup', MagnifyingGlassZoomButtonGroup ); +export default MagnifyingGlassZoomButtonGroup; \ No newline at end of file diff --git a/js/PlusMinusZoomButtonGroup.js b/js/PlusMinusZoomButtonGroup.js new file mode 100644 index 000000000..5e3d4ab5d --- /dev/null +++ b/js/PlusMinusZoomButtonGroup.js @@ -0,0 +1,51 @@ +// Copyright 2020, University of Colorado Boulder + +import Dimension2 from '../../dot/js/Dimension2.js'; +import merge from '../../phet-core/js/merge.js'; +import AlignBox from '../../scenery/js/nodes/AlignBox.js'; +import AlignGroup from '../../scenery/js/nodes/AlignGroup.js'; +import MinusNode from './MinusNode.js'; +import PlusNode from './PlusNode.js'; +import sceneryPhet from './sceneryPhet.js'; +import ZoomButtonGroup from './ZoomButtonGroup.js'; + +// constants +const DEFAULT_SIZE = new Dimension2( 20 * 0.35, 3.6 * 0.35 ); + +/** + * A ZoomButtonGroup that shows a "+" and "-" sign for the button icons. + * + * @author Sam Reid (PhET Interactive Simulations) + */ +class PlusMinusZoomButtonGroup extends ZoomButtonGroup { + + /** + * @param {NumberProperty} zoomLevelProperty - smaller value means more zoomed out + * @param {Object} [options] + */ + constructor( zoomLevelProperty, options ) { + options = merge( { + buttonOptions: { + xMargin: 9, + yMargin: 10 + }, + iconOptions: { + size: DEFAULT_SIZE + } + }, options ); + + // Make sure the + and - have the same dimensions + const alignGroup = new AlignGroup(); + const plusMinusNodeOptions = merge( { size: DEFAULT_SIZE }, options.iconOptions ); + const alignBoxOptions = { group: alignGroup }; + + super( + new AlignBox( new PlusNode( plusMinusNodeOptions ), alignBoxOptions ), + new AlignBox( new MinusNode( plusMinusNodeOptions ), alignBoxOptions ), + zoomLevelProperty, options + ); + } +} + +sceneryPhet.register( 'PlusMinusZoomButtonGroup', PlusMinusZoomButtonGroup ); +export default PlusMinusZoomButtonGroup; \ No newline at end of file diff --git a/js/ZoomButtonGroup.js b/js/ZoomButtonGroup.js index f88f5a657..bda173545 100644 --- a/js/ZoomButtonGroup.js +++ b/js/ZoomButtonGroup.js @@ -10,25 +10,24 @@ import NumberProperty from '../../axon/js/NumberProperty.js'; import merge from '../../phet-core/js/merge.js'; import LayoutBox from '../../scenery/js/nodes/LayoutBox.js'; -import Text from '../../scenery/js/nodes/Text.js'; +import Node from '../../scenery/js/nodes/Node.js'; import ButtonNode from '../../sun/js/buttons/ButtonNode.js'; import RectangularPushButton from '../../sun/js/buttons/RectangularPushButton.js'; import Tandem from '../../tandem/js/Tandem.js'; -import MathSymbols from './MathSymbols.js'; -import PhetFont from './PhetFont.js'; import sceneryPhet from './sceneryPhet.js'; -// constants -const DEFAULT_FONT = new PhetFont( 16 ); - class ZoomButtonGroup extends LayoutBox { /** + * @param {Node} zoomInIcon + * @param {Node} zoomOutIcon * @param {NumberProperty} zoomLevelProperty - smaller value means more zoomed out * @param {Object} [options] */ - constructor( zoomLevelProperty, options ) { + constructor( zoomInIcon, zoomOutIcon, zoomLevelProperty, options ) { + assert && assert(zoomInIcon instanceof Node,'icons are required in the base class'); + assert && assert(zoomOutIcon instanceof Node,'icons are required in the base class'); assert && assert( zoomLevelProperty instanceof NumberProperty, 'invalid zoomLevelProperty' ); assert && assert( zoomLevelProperty.range, 'missing zoomLevelProperty.range' ); @@ -55,11 +54,6 @@ class ZoomButtonGroup extends LayoutBox { fireOnHoldInterval: 250 // ms }, - // Text options, for the + and - buttons - textOptions: { - font: DEFAULT_FONT - }, - // LayoutBox options spacing: 0, orientation: 'horizontal', @@ -74,7 +68,7 @@ class ZoomButtonGroup extends LayoutBox { // zoom in const zoomInButton = new RectangularPushButton( merge( {}, options.buttonOptions, { - content: new Text( MathSymbols.PLUS, options.textOptions ), + content: zoomInIcon, listener: () => { zoomLevelProperty.value += options.zoomInDelta; }, @@ -83,7 +77,7 @@ class ZoomButtonGroup extends LayoutBox { // zoom out const zoomOutButton = new RectangularPushButton( merge( {}, options.buttonOptions, { - content: new Text( MathSymbols.MINUS, options.textOptions ), + content: zoomOutIcon, listener: () => { zoomLevelProperty.value += options.zoomOutDelta; },